原生js實(shí)現(xiàn)點(diǎn)擊輪播切換圖片
本文實(shí)例為大家分享了js實(shí)現(xiàn)點(diǎn)擊輪播切換圖片的具體代碼,供大家參考,具體內(nèi)容如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>點(diǎn)擊輪播圖</title> </head> <style> .container { position: relative; width: 600px; height: 400px; margin:100px auto 0 auto; box-shadow: 0 0 5px green; overflow: hidden; } .wrap { position: absolute; width: 4200px; height: 400px; z-index: 1; } .container .wrap img { float: left; width: 600px; height: 400px; } .container .buttons { position: absolute; right: 40%; bottom:20px; z-index: 2; } .container .buttons span { margin-left: 10px; display: inline-block; width: 7px; height: 7px; background-color: #D4D4D4; text-align: center; color:white; cursor: pointer; } .container .buttons span.on{ background-color: #558949; } .container .arrow { position: absolute; top: 35%; color: green; padding:0px 14px; border-radius: 50%; font-size: 50px; z-index: 2; display: none; } </style> <body> <div class="container"> <div class="wrap" style="left:-600px;"> <img alt=""> <img src="./img/jd_app3.png" alt=""> <img src="./img/jd_app4.png" alt=""> <img src="./img/jd_app5.png" alt=""> <img src="./img/jd_app6.png" alt=""> <img src="./img/jd_app7.png" alt=""> </div> <div class="buttons"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> <script> var wrap = document.querySelector(".wrap"); var index = 0; var dots = document.getElementsByTagName("span"); function showCurrentDot () { for(var i = 0, len = dots.length; i < len; i++){ dots[i].className = ""; } dots[index].className = "on"; } index++; if(index > 4){ index = 0; } index--; if(index < 0){ index = 4; } showCurrentDot(); for (var i = 0, len = dots.length; i < len; i++){ (function(i){ dots[i].onclick = function () { var dis = index - i; if(index == 4 && parseInt(wrap.style.left)!==-3000){ dis = dis - 5; } //和使用prev和next相同,在最開(kāi)始的照片5和最終的照片1在使用時(shí)會(huì)出現(xiàn)問(wèn)題,導(dǎo)致符號(hào)和位數(shù)的出錯(cuò),做相應(yīng)地處理即可 if(index == 0 && parseInt(wrap.style.left)!== -600){ dis = 5 + dis; } wrap.style.left = (parseInt(wrap.style.left) + dis * 600)+"px"; index = i; showCurrentDot(); } })(i); } </script> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
點(diǎn)擊按鈕或鏈接不跳轉(zhuǎn)只刷新頁(yè)面的腳本整理
點(diǎn)擊按鈕或鏈接時(shí)不跳轉(zhuǎn)只刷新頁(yè)面,在某些情況下還是比較實(shí)用的,下面整理些不錯(cuò)的示例,感興趣的朋友可以參考下2013-10-10javascript實(shí)現(xiàn)勻速動(dòng)畫(huà)效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)勻速動(dòng)畫(huà)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09js實(shí)現(xiàn)綠白相間豎向網(wǎng)頁(yè)百葉窗動(dòng)畫(huà)切換效果
這篇文章主要介紹了js實(shí)現(xiàn)綠白相間豎向網(wǎng)頁(yè)百葉窗動(dòng)畫(huà)切換效果,實(shí)例分析了javascript實(shí)現(xiàn)百葉窗動(dòng)畫(huà)效果的技巧,需要的朋友可以參考下2015-03-03JS組件Form表單驗(yàn)證神器BootstrapValidator
做Web開(kāi)發(fā)的我們,表單驗(yàn)證是再常見(jiàn)不過(guò)的需求了。友好的錯(cuò)誤提示能增加用戶(hù)體驗(yàn)。今天就來(lái)看看bootstrapvalidator如何使用,感興趣的小伙伴們可以參考一下2016-01-01微信小程序?qū)崿F(xiàn)菜單左右聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)菜單左右聯(lián)動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07解決npm安裝Electron緩慢網(wǎng)絡(luò)超時(shí)導(dǎo)致失敗的問(wèn)題
下面小編就為大家分享一篇解決npm安裝Electron緩慢網(wǎng)絡(luò)超時(shí)導(dǎo)致失敗的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02JavaScript獲取當(dāng)前運(yùn)行腳本文件所在目錄的方法
這篇文章主要介紹了JavaScript獲取當(dāng)前運(yùn)行腳本文件所在目錄的方法,涉及JavaScript文件目錄操作的相關(guān)技巧,需要的朋友可以參考下2016-02-02