JavaScript仿京東輪播圖效果
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)京東輪播圖效果展示的具體代碼,供大家參考,具體內(nèi)容如下
做了一個(gè)仿京東的輪播圖,當(dāng)然沒有人家官網(wǎng)的精美啦。
主要技術(shù)點(diǎn):
- 每隔3秒自動切換圖片;
- 鼠標(biāo)移入圖片自動暫停切換,鼠標(biāo)移出則繼續(xù);
- 點(diǎn)擊左右方向按鈕手動切換圖片;
- 鼠標(biāo)移到灰色圓點(diǎn),顯示對應(yīng)的圖片,并加亮顯示。
HTML代碼:
<body> <h1>輪播圖展示</h1> <div id="did"> <!-- 圖片 --> <div id="img-div" onmouseover="doStop()" onmouseout="doStart()"> <img src="./1.jpg"> <img src="./2.jpg"> <img src="./3.jpg"> <img src="./4.jpg"> <img src="./5.jpg"> <img src="./6.jpg"> <img src="./7.jpg"> <img src="./8.jpg"> </div> <!-- 左右按鈕 --> <div id="btn-div"> <div id="left-btn" onclick="doLeftClick()"> <h3> < </h3> </div> <div id="right-btn" onclick="doRightClick()"> <h3> > </h3> </div> </div> <!-- 圓點(diǎn) --> <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; } /* 點(diǎn)亮第一個(gè)圓點(diǎn) */ #cir-div div:first-child { background: #fff; } #cir-div { position: absolute; /* 相對于圖片的位置 */ left: 40px; bottom: 25px; } /* 下方圓點(diǎn) */ #cir-div div { width: 8px; height: 8px; float: left; /* 50%時(shí)為圓形 */ 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; /* 動畫效果,放在變化前,當(dāng)鼠標(biāo)移動上面時(shí),會緩慢變色 */ 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; /* 動畫效果,放在變化前,當(dāng)鼠標(biāo)移動上面時(shí),會緩慢變色 */ 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; //時(shí)間 var time = null; //圖片列表 var imglist = document.getElementById("img-div").getElementsByTagName("img"); //圓點(diǎn)列表 var cirlist = document.getElementById("cir-div").getElementsByTagName("div"); //展示對應(yīng)的圖片和點(diǎn)亮對應(yīng)的圓點(diǎn) function show(x) { for (var i = 0; i < imglist.length; i++) { if (x == i + 1) { //顯示圖片 imglist[i].style.display = "block"; //圓點(diǎn)點(diǎn)亮 cirlist[i].style.backgroundColor = "#fff"; } else { imglist[i].style.display = "none"; cirlist[i].style.background = "rgba(255, 255, 255, .4)"; } } } //定時(shí)輪播圖片(每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; } } //鼠標(biāo)移到圓點(diǎn)上圖片會相應(yīng)切換,并且之后會點(diǎn)亮下一個(gè)圓點(diǎn) 而不是未移到圓點(diǎn)前的下一個(gè)圓點(diǎn) function doMove(x) { show(x); //將位置賦給count,圖片就會從該圖片的下一張開始切換 count = x; //當(dāng)鼠標(biāo)移到最后一個(gè)圓點(diǎn)時(shí),需要將count變?yōu)?,不然執(zhí)行doStart()里的count++,count就會變?yōu)?,越界了 if (count == 8) { count = 0; } } /* 對于i 、count和show(x)里x的關(guān)系: i = [0,7]; x = [1,8]; count = [1,8]; */ //點(diǎn)擊左邊按鈕向左切換圖片 function doLeftClick() { for (var i = 0; i < imglist.length; i++) { //判斷當(dāng)前在展示的是哪張圖片 if (imglist[i].style.display == "block") { if (i == 0) { show(8); // 忘掉這句后,break會直接退出,當(dāng)左按鈕按到最右的圓點(diǎn),會直接忽略圓點(diǎn)1,直接跳到圓點(diǎn)2 count = 0; //保證切換是3秒鐘 doStop(); doStart(); break; } show(i); count = i; //保證切換是3秒鐘 doStop(); doStart(); break; } } } //點(diǎn)擊右邊按鈕向右切換圖片 function doRightClick() { for (var i = 0; i < imglist.length; i++) { //判斷當(dāng)前在展示的是哪張圖片 if (imglist[i].style.display == "block") { if (i == 7) { show(1); count = 1; doStop(); doStart(); break; } show(i + 2); count = i + 2; //就不會出現(xiàn)切換到?jīng)]有圖片的情況 if (count >= 8) { count = 0; } doStop(); doStart(); break; } } } doStart(); //默認(rèn)打開頁面顯示的是第一張圖片 //(不加,會出現(xiàn)第1個(gè)圓點(diǎn)亮也就是剛打開頁面時(shí),左按鈕沒反應(yīng)) doMove(1); </script>
遇到的難點(diǎn):
雖說輪播圖看起來還蠻簡單的,但實(shí)現(xiàn)起來還挺多問題的。不過我發(fā)現(xiàn)的都解決掉了。
- 圓點(diǎn)與按鈕放置在圖片上
- 自動切換圖片了但對應(yīng)的圓點(diǎn)沒有點(diǎn)亮
- 鼠標(biāo)移到圓點(diǎn)上圖片切換了,但下一個(gè)自動點(diǎn)亮的圓點(diǎn)卻是未移到圓點(diǎn)前的下一個(gè)
- 第1個(gè)圓點(diǎn)亮也就是剛打開頁面時(shí),左按鈕沒反應(yīng)
- 當(dāng)左按鈕按到最右的圓點(diǎn),會直接忽略圓點(diǎn)1,直接跳到圓點(diǎn)2
- 在最后一個(gè)圓點(diǎn)時(shí)點(diǎn)擊右按鈕時(shí),會出現(xiàn)切換到?jīng)]有圖片的情況
- 點(diǎn)左按鈕切換時(shí)間大概2秒,點(diǎn)右按鈕切換時(shí)間大概5秒,時(shí)間并沒有達(dá)到標(biāo)準(zhǔn)的3秒
不過我都解決啦!
最大的感觸就是剛解決掉一個(gè)bug正沾沾自喜時(shí),又來一個(gè)bug。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
typescript+react實(shí)現(xiàn)移動端和PC端簡單拖拽效果
這篇文章主要為大家詳細(xì)介紹了typescript+react實(shí)現(xiàn)移動端和PC端簡單拖拽效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09layui 數(shù)據(jù)表格復(fù)選框?qū)崿F(xiàn)單選功能的例子
今天小編就為大家分享一篇layui 數(shù)據(jù)表格復(fù)選框?qū)崿F(xiàn)單選功能的例子,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09Webpack常見靜態(tài)資源處理-模塊加載器(Loaders)+ExtractTextPlugin插件
這篇文章主要介紹了Webpack常見靜態(tài)資源處理-模塊加載器(Loaders)+ExtractTextPlugin插件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06js限制input只能輸入有效的數(shù)字(第一個(gè)不能是小數(shù)點(diǎn))
有時(shí)候我們需要限制input只能輸入有效的數(shù)字,有且只有一個(gè)小數(shù)點(diǎn),第一個(gè)不能為小數(shù)點(diǎn),那么就可以參考下面的函數(shù)來實(shí)現(xiàn)2018-09-09Taro小程序自定義頂部導(dǎo)航欄功能的實(shí)現(xiàn)
這篇文章主要介紹了Taro小程序自定義頂部導(dǎo)航欄功能的實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12JS判斷數(shù)組里是否有重復(fù)元素的方法小結(jié)
這篇文章主要介紹了JS判斷數(shù)組里是否有重復(fù)元素的方法,結(jié)合實(shí)例形式分析了javascript針對數(shù)組重復(fù)元素判斷相關(guān)的遍歷、排序、遞歸等相關(guān)操作技巧,需要的朋友可以參考下2019-05-05LayUI+Shiro實(shí)現(xiàn)動態(tài)菜單并記住菜單收展的示例
這篇文章主要介紹了LayUI+Shiro實(shí)現(xiàn)動態(tài)菜單并記住菜單收展的示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05