原生js實(shí)現(xiàn)點(diǎn)擊輪播切換圖片
更新時(shí)間:2020年02月11日 09:08:55 作者:LLLiiv
這篇文章主要為大家詳細(xì)介紹了原生js點(diǎn)擊輪播切換圖片,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(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相同,在最開始的照片5和最終的照片1在使用時(shí)會出現(xiàn)問題,導(dǎo)致符號和位數(shù)的出錯,做相應(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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
點(diǎn)擊按鈕或鏈接不跳轉(zhuǎn)只刷新頁面的腳本整理
點(diǎn)擊按鈕或鏈接時(shí)不跳轉(zhuǎn)只刷新頁面,在某些情況下還是比較實(shí)用的,下面整理些不錯的示例,感興趣的朋友可以參考下2013-10-10js實(shí)現(xiàn)綠白相間豎向網(wǎng)頁百葉窗動畫切換效果
這篇文章主要介紹了js實(shí)現(xiàn)綠白相間豎向網(wǎng)頁百葉窗動畫切換效果,實(shí)例分析了javascript實(shí)現(xiàn)百葉窗動畫效果的技巧,需要的朋友可以參考下2015-03-03JS組件Form表單驗(yàn)證神器BootstrapValidator
做Web開發(fā)的我們,表單驗(yàn)證是再常見不過的需求了。友好的錯誤提示能增加用戶體驗(yàn)。今天就來看看bootstrapvalidator如何使用,感興趣的小伙伴們可以參考一下2016-01-01微信小程序?qū)崿F(xiàn)菜單左右聯(lián)動效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)菜單左右聯(lián)動效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07解決npm安裝Electron緩慢網(wǎng)絡(luò)超時(shí)導(dǎo)致失敗的問題
下面小編就為大家分享一篇解決npm安裝Electron緩慢網(wǎng)絡(luò)超時(shí)導(dǎo)致失敗的問題,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02JavaScript獲取當(dāng)前運(yùn)行腳本文件所在目錄的方法
這篇文章主要介紹了JavaScript獲取當(dāng)前運(yùn)行腳本文件所在目錄的方法,涉及JavaScript文件目錄操作的相關(guān)技巧,需要的朋友可以參考下2016-02-02