JavaScript實現(xiàn)輪播圖案例
更新時間:2021年09月30日 17:05:08 作者:一個學(xué)前端的小菜鳥
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)輪播圖案例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)輪播圖效果的具體代碼,供大家參考,具體內(nèi)容如下
運(yùn)用定時器所寫成的一個簡單的輪播圖,直接看代碼,如下:
1.css代碼
<style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ font-size: 14px; font-family: Arial, Helvetica, sans-serif; } .slider-box{ width: 1226px; height: 460px; margin: 10px auto; overflow: hidden; position: relative; } .slider-box .images a{ width: 100%; height: 460px; position: absolute; left: 0; top: 0; opacity: 0; transition: all 2s; } .slider-box .images a.active{ opacity: 1; } .slider-box .images a img{ width: 100%; height: 100%; display: block; } .slider-box .nav{ position: absolute; left: 0; top: 195px; width: 100%; /* background-color: red; */ padding: 0 10px; /* height: 100px; */ } .slider-box .nav a{ background-image: url(img/icons.png); width: 41px; height: 69px; display: inline-block; background-repeat: no-repeat; } .slider-box .nav .prev{ background-position: -84px 0; } .slider-box .nav .prev:hover{ background-position: 0 0; } .slider-box .nav .next{ background-position: -125px 0; float: right; } .slider-box .nav .next:hover{ background-position: -42px 0; } .slider-box .pages{ position: absolute; right: 20px; bottom: 25px; font-size: 0; width: 1186px; text-align: center; /* background-color: rebeccapurple; */ } .slider-box .pages .dot{ display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: rgba(0,0,0,0.4); margin-right: 10px; } .slider-box .pages .dot:hover{ background-color: yellow; } .slider-box .pages .dot.active{ background-color: yellow; } </style>
2.html代碼
<div class="slider-box"> <div class="images"> <!-- 以后哪張圖片要想顯示了,只需要添加一個 active類就行 --> <a href="#" class="active"> <img src="img/1.jpg" alt=""> </a> <a href="#" > <img src="img/2.jpg" alt=""> </a> <a href="#" > <img src="img/3.jpg" alt=""> </a> <a href="#" > <img src="img/4.jpg" alt=""> </a> <a href="#" > <img src="img/5.jpg" alt=""> </a> </div> <div class="nav"> <a href="javascript:;" class="prev" title="前一張"></a> <a href="javascript:;" class="next" title="下一張"></a> </div> <div class="pages"> <a href="javascript:;" class="dot active"></a> <a href="javascript:;" class="dot"></a> <a href="javascript:;" class="dot"></a> <a href="javascript:;" class="dot"></a> <a href="javascript:;" class="dot"></a> </div> </div>
3.js代碼
<script> // 定時器切換圖片的功能 var images = document.querySelectorAll('.images a') var index = 0 //定義要播放的圖片的索引 var pages = document.querySelectorAll(".dot") var prev = document.querySelector(".prev") var next = document.querySelector(".next") // 根據(jù)索引值切換圖片 // 找到images的a標(biāo)簽,添加active這個類 function showImage(idx){ images.forEach(function(v,i){ // idx = 1 // i = 0 1 2 3 4 if(i===idx){ v.classList.add('active') //控制對應(yīng)點(diǎn)高亮 pages[i].classList.add("active") }else{ v.classList.remove('active') pages[i].classList.remove("active") } }) } // showImage(3) prev.onclick = function(){ if(index===0){ index = images.length - 1// 4 }else{ index = index - 1 } showImage(index) } next.onclick = function(){ if(index===images.length-1){ index = 0 }else{ index+=1 } showImage(index) } var timer = setInterval(function(){ // 定時器控制圖片的切換和點(diǎn)擊下一張的功能一樣 // 調(diào)用下一張的點(diǎn)擊操作 next.click()// 模擬next的點(diǎn)擊操作 },3000) </script>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap-table自定義可編輯每頁顯示記錄數(shù)
這篇文章主要介紹了Bootstrap-table自定義可編輯每頁顯示記錄數(shù)的相關(guān)知識,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09JS實現(xiàn)點(diǎn)擊Radio動態(tài)更新table數(shù)據(jù)
這篇文章主要介紹了JS實現(xiàn)點(diǎn)擊Radio動態(tài)更新table數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2017-07-07JavaScript通過改變文字透明度實現(xiàn)的文字閃爍效果實例
這篇文章主要介紹了JavaScript通過改變文字透明度實現(xiàn)的文字閃爍效果,結(jié)合完整實例形式分析了javascript基于定時器周期性動態(tài)修改頁面元素屬性的相關(guān)操作技巧,需要的朋友可以參考下2017-04-04javascript中關(guān)于&& 和 || 表達(dá)式的小技巧分享
我將會介紹和解析12個簡單但是強(qiáng)大的JavaScript技巧. 這些技巧所有的JavaScript程序員都可以馬上使用, 你不需要成為JavaScript高手才能理解這些.下面我們開始本系列的第一篇文章,介紹下強(qiáng)大的&& 和 || 表達(dá)式2015-04-04用js來刷新當(dāng)前頁面保留參數(shù)的具體實現(xiàn)
本文為大家詳細(xì)介紹下如何使用js來刷新當(dāng)前頁面保留參數(shù),下面有個不錯的實現(xiàn)大家可以看看2013-12-12