JavaScript仿京東輪播圖效果
本文實例為大家分享了JavaScript實現(xiàn)京東輪播圖效果展示的具體代碼，供大家參考，具體內容如下
做了一個仿京東的輪播圖，當然沒有人家官網的精美啦。
主要技術點：
每隔3秒自動切換圖片；鼠標移入圖片自動暫停切換，鼠標移出則繼續(xù)；點擊左右方向按鈕手動切換圖片；鼠標移到灰色圓點，顯示對應的圖片，并加亮顯示。
HTML代碼：
<body> <h1>輪播圖展示</h1> <div id='did'> <!-- 圖片 --> <div onmouseover='doStop()' onmouseout='doStart()'> <img src='http://www.aoyou183.cn/bcjs/1.jpg'> <img src='http://www.aoyou183.cn/bcjs/2.jpg'> <img src='http://www.aoyou183.cn/bcjs/3.jpg'> <img src='http://www.aoyou183.cn/bcjs/4.jpg'> <img src='http://www.aoyou183.cn/bcjs/5.jpg'> <img src='http://www.aoyou183.cn/bcjs/6.jpg'> <img src='http://www.aoyou183.cn/bcjs/7.jpg'> <img src='http://www.aoyou183.cn/bcjs/8.jpg'> </div> <!-- 左右按鈕 --> <div id='btn-div'> <div onclick='doLeftClick()'> <h3> < </h3> </div> <div onclick='doRightClick()'> <h3> > </h3> </div> </div> <!-- 圓點 --> <div id='cir-div'> <div onmouseover='doMove(1)'></div> <div onmouseover='doMove(2)'></div> <div onmouseover='doMove(3)'></div> <div onmouseover='doMove(4)'></div> <div onmouseover='doMove(5)'></div> <div onmouseover='doMove(6)'></div> <div onmouseover='doMove(7)'></div> <div onmouseover='doMove(8)'></div> </div> </div></body>
CSS代碼：
<style> * { margin: 0px; padding: 0px; } body { background-color: rgb(255, 249, 249); } h1 { text-align: center; padding-top: 40px; color: rgba(250, 54, 129, 0.562); } #did { position: relative; width: 590px; height: 470px; margin: 30px auto; } #img-div { position: absolute; } #img-div img { width: 590px; display: none; cursor: pointer; z-index: -1; } /* 這兩段可不加 */ /* 顯示第一張圖片 */ #img-div img:first-child { display: block; } /* 點亮第一個圓點 */ #cir-div div:first-child { background: #fff; } #cir-div { position: absolute; /* 相對于圖片的位置 */ left: 40px; bottom: 25px; } /* 下方圓點 */ #cir-div div { width: 8px; height: 8px; float: left; /* 50%時為圓形 */ border-radius: 50%; margin-right: 6px; border: 1px solid rgba(0, 0, 0, .05); background: rgba(255, 255, 255, .4); } #left-btn { position: absolute; /* 相對于圖片的位置 */ top: 45%; /* 左半圓按鈕 */ width: 27px; height: 38px; background: rgba(119, 119, 119, 0.5); border-radius: 0 20px 20px 0; /* 動畫效果，放在變化前，當鼠標移動上面時，會緩慢變色 */ transition: background-color 0.3s ease-out; } #right-btn { position: absolute; /* 相對于圖片的位置 */ top: 45%; right: 0px; /* 右半圓按鈕 */ width: 27px; height: 38px; background-color: rgba(119, 119, 119, 0.5); border-radius: 20px 0 0 20px; /* 動畫效果，放在變化前，當鼠標移動上面時，會緩慢變色 */ transition: background-color 0.3s ease-out; } #left-btn:hover { background-color: rgba(32, 32, 32, 0.5); cursor: pointer; } #right-btn:hover { background-color: rgba(32, 32, 32, 0.5); cursor: pointer; } #left-btn h3 { color: #fff; margin-top: 4px; margin-left: 2px; } #right-btn h3 { color: #fff; margin-top: 4px; margin-left: 8px; }</style>
JavaScript代碼：
<script> //顯示第幾張圖片 var count = 1; //時間 var time = null; //圖片列表 var imglist = document.getElementById('img-div').getElementsByTagName('img'); //圓點列表 var cirlist = document.getElementById('cir-div').getElementsByTagName('div'); //展示對應的圖片和點亮對應的圓點 function show(x) { for (var i = 0; i < imglist.length; i++) { if (x == i + 1) { //顯示圖片 imglist[i].style.display = 'block'; //圓點點亮 cirlist[i].style.backgroundColor = '#fff'; } else { imglist[i].style.display = 'none'; cirlist[i].style.background = 'rgba(255, 255, 255, .4)'; } } } //定時輪播圖片(每3秒切換一張圖片) function doStart() { if (time == null) { time = setInterval(function () { count++; show(count); if (count >= 8) { count = 0; } }, 3000); } } //停止輪播圖片 function doStop() { if (time != null) { clearInterval(time); time = null; } } //鼠標移到圓點上圖片會相應切換，并且之后會點亮下一個圓點 而不是未移到圓點前的下一個圓點 function doMove(x) { show(x); //將位置賦給count，圖片就會從該圖片的下一張開始切換 count = x; //當鼠標移到最后一個圓點時，需要將count變?yōu)?,不然執(zhí)行doStart()里的count++，count就會變?yōu)?，越界了 if (count == 8) { count = 0; } } /* 對于i 、count和show(x)里x的關系： i = [0,7]; x = [1,8]; count = [1,8]; */ //點擊左邊按鈕向左切換圖片 function doLeftClick() { for (var i = 0; i < imglist.length; i++) { //判斷當前在展示的是哪張圖片 if (imglist[i].style.display == 'block') { if (i == 0) { show(8); // 忘掉這句后，break會直接退出，當左按鈕按到最右的圓點，會直接忽略圓點1，直接跳到圓點2 count = 0; //保證切換是3秒鐘 doStop(); doStart(); break; } show(i); count = i; //保證切換是3秒鐘 doStop(); doStart(); break; } } } //點擊右邊按鈕向右切換圖片 function doRightClick() { for (var i = 0; i < imglist.length; i++) { //判斷當前在展示的是哪張圖片 if (imglist[i].style.display == 'block') { if (i == 7) { show(1); count = 1; doStop(); doStart(); break; } show(i + 2); count = i + 2; //就不會出現(xiàn)切換到沒有圖片的情況 if (count >= 8) { count = 0; } doStop(); doStart(); break; } } } doStart(); //默認打開頁面顯示的是第一張圖片 //（不加，會出現(xiàn)第1個圓點亮也就是剛打開頁面時，左按鈕沒反應） doMove(1);</script>
遇到的難點：
雖說輪播圖看起來還蠻簡單的，但實現(xiàn)起來還挺多問題的。不過我發(fā)現(xiàn)的都解決掉了。
圓點與按鈕放置在圖片上 自動切換圖片了但對應的圓點沒有點亮 鼠標移到圓點上圖片切換了，但下一個自動點亮的圓點卻是未移到圓點前的下一個 第1個圓點亮也就是剛打開頁面時，左按鈕沒反應 當左按鈕按到最右的圓點，會直接忽略圓點1，直接跳到圓點2 在最后一個圓點時點擊右按鈕時，會出現(xiàn)切換到沒有圖片的情況 點左按鈕切換時間大概2秒，點右按鈕切換時間大概5秒，時間并沒有達到標準的3秒不過我都解決啦！
最大的感觸就是剛解決掉一個bug正沾沾自喜時，又來一個bug。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備