JS實(shí)現(xiàn)輪播圖效果的3種簡單方法
本文實(shí)例為大家分享了3種方法實(shí)現(xiàn)JS輪播圖效果的具體代碼,供大家參考,具體內(nèi)容如下
Js實(shí)現(xiàn)輪播圖01
實(shí)現(xiàn)思路
這可能是輪播圖最簡單點(diǎn)的實(shí)現(xiàn)之一,通過更改圖片的src來實(shí)現(xiàn)該效果,首先需要將圖片命名格式統(tǒng)一比如pic01.jpg,pic02.jpg…,再通過js使用定時(shí)器去改變img標(biāo)簽里面的src圖片鏈接的名字來實(shí)現(xiàn)切換效果。代碼如下:
實(shí)現(xiàn)效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>輪播圖實(shí)現(xiàn)01</title> <style type="text/css"> .lunbo{ width: 900px; height: 400px; margin:100px auto; } .lunbo img{ width: 100%; height:100%; } </style> </head> <body> <!--輪播圖模塊 --> <div class="lunbo"> <img id="lunbo_img" src="./pic/img3.jpeg" > </div> <!-- Js代碼 --> <script> var index = 1; function lunbo(){ index ++ ; //判斷index是否大于3 if(index > 3){ index = 1; } //獲取img對(duì)象 var img = document.getElementById("lunbo_img"); img.src = "./pic/img"+index+".jpeg"; } //2.定義定時(shí)器 setInterval(lunbo,2000); /*切記定時(shí)器里調(diào)用lunbo方法不能加(),setInterval(lunbo,2000);如果加()會(huì)執(zhí)行l(wèi)unbo()方法,而導(dǎo)致定時(shí)器沒用。 </script> </body> </html>
Js實(shí)現(xiàn)輪播圖02
實(shí)現(xiàn)思路
這可能是輪播圖最簡單點(diǎn)的實(shí)現(xiàn)之一,通過改變background的圖片鏈接來實(shí)現(xiàn)該效果,首先需要將圖片命名格式統(tǒng)一比如pic01.jpg,pic02.jpg…,再通過js使用定時(shí)器去改變background屬性里面的url()圖片鏈接的名字來實(shí)現(xiàn)切換效果。代碼如下:
實(shí)現(xiàn)效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>輪播圖實(shí)現(xiàn)02</title> <style> body{ margin: 0; padding: 0; } .lunbo{ width:100%; height:720px; background-image: url(pic/img1.jpeg);/*背景圖片*/ background-size:100% 100%; } </style> </head> <body> <div class="lunbo"> </div> <script type="text/javascript"> var index = 1; function lunbo(){ index ++ ; //判斷number是否大于3 if(index > 3){ index = 1; } //獲取img對(duì)象 var img = document.getElementsByClassName("lunbo")[0]; img.style.background = "url(pic/img"+index+".jpeg)"; img.style.backgroundSize="100% 100%"; } //2.定義定時(shí)器 setInterval(lunbo,3000); </script> </body> </html>
Js實(shí)現(xiàn)輪播圖03
本輪播圖的實(shí)現(xiàn),首先通過CSS代碼將全部存放圖片的li標(biāo)簽通過opacity屬性設(shè)置為0來隱藏不顯示, 通過js代碼使用定時(shí)器不斷調(diào)用類active突出顯示li標(biāo)簽,同時(shí)隱藏兄弟li標(biāo)簽,再通過index++來實(shí)現(xiàn)切換循環(huán)顯示的效果,當(dāng)點(diǎn)擊兩邊的按鈕時(shí),調(diào)用index++所在的方法實(shí)現(xiàn)切換的效果,沒有復(fù)雜的算法,一點(diǎn)點(diǎn)基礎(chǔ)一看代碼就會(huì)學(xué)會(huì),請(qǐng)大家參考。
實(shí)現(xiàn)效果
HTML代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1,maximum-scale=1,user-scalable=no" /> <!--引入CSS代碼--> <link rel="stylesheet" type="text/css" href="./css/index.css" /> <!--引入Js代碼--> <script src="./js/index.js"></script> <title>Js實(shí)現(xiàn)輪播圖</title> </head> <body> <div class="lunbo"> <div class="content"> <ul id="item"> <li class="item"> <a href="#" ><img src="img/pic1.jpg" ></a> </li> <li class="item"> <a href="#" ><img src="img/pic2.jpg" ></a> </li> <li class="item"> <a href="#" ><img src="img/pic3.jpg" ></a> </li> <li class="item"> <a href="#" ><img src="img/pic4.jpg" ></a> </li> <li class="item"> <a href="#" ><img src="img/pic5.jpg" ></a> </li> </ul> <div id="btn-left"><</div> <div id="btn-right">></div> <ul id="circle"> <li class="circle"></li> <li class="circle"></li> <li class="circle"></li> <li class="circle"></li> <li class="circle"></li> </ul> </div> </div> </body> </html>
CSS代碼
*{ margin: 0; padding: 0; } a{ list-style: none; } li{ list-style: none; } .lunbo{ width: 100%; } .content{ width: 800px; height: 300px; margin: 20px auto; position: relative; } #item{ width: 100%; height: 100%; } .item{ position: absolute; opacity: 0; transition: all 1s; } .item.active{ opacity:1; } img{ width: 100%; } #btn-left{ width: 30px; height: 69px; font-size: 30px; color: white; background-color:rgba(0,0,0,0.4); line-height: 69px; padding-left:5px; z-index: 10;/*始終顯示在圖片的上層*/ position: absolute; left: 0; top: 50%; transform: translateY(-60%);/*使按鈕向上偏移居中對(duì)齊*/ cursor: pointer; opacity: 0;/*平時(shí)隱藏*/ } .lunbo:hover #btn-left{ /*鼠標(biāo)滑入,顯示圖標(biāo)*/ opacity: 1; } #btn-right{ width: 26px; height: 69px; font-size: 30px; color: white; background-color:rgba(0,0,0,0.4); line-height: 69px; padding-left: 5px; z-index: 10; position: absolute; right: 0; top: 50%; cursor: pointer; opacity: 0; transform: translateY(-60%); } .lunbo:hover #btn-right{ opacity: 1; } #circle{ height: 20px; display: flex; position: absolute; bottom: 35px; right: 25px; } .circle{ width: 10px; height: 10px; border-radius: 10px; border: 2px solid white; background: rgba(0,0,0,0.4); cursor: pointer; margin: 5px; } .white{ background-color: #FFFFFF; }
JS代碼
window.onload=function(){ var items=document.getElementsByClassName("item"); var circles=document.getElementsByClassName("circle"); var leftBtn=document.getElementById("btn-left"); var rightBtn=document.getElementById("btn-right"); var content=document.querySelector('.content'); var index=0; var timer=null; //清除class var clearclass=function(){ for(let i=0;i<items.length;i++){ items[i].className="item"; circles[i].className="circle"; circles[i].setAttribute("num",i); } } /*只顯示一個(gè)class*/ function move(){ clearclass(); items[index].className="item active"; circles[index].className="circle white"; } //點(diǎn)擊右邊按鈕切換下一張圖片 rightBtn.onclick=function(){ if(index<items.length-1){ index++; } else{ index=0; } move(); } //點(diǎn)擊左邊按鈕切換上一張圖片 leftBtn.onclick=function(){ if(index<items.length){ index--; } else{ index=items.length-1; } move(); } //開始定時(shí)器,點(diǎn)擊右邊按鈕,實(shí)現(xiàn)輪播 timer=setInterval(function(){ rightBtn.onclick(); },1500) //點(diǎn)擊圓點(diǎn)時(shí),跳轉(zhuǎn)到對(duì)應(yīng)圖片 for(var i=0;i<circles.length;i++){ circles[i].addEventListener("click",function(){ var point_index=this.getAttribute("num"); index=point_index; move(); }) } //鼠標(biāo)移入清除定時(shí)器,并開啟一個(gè)三秒的定時(shí)器,使慢慢轉(zhuǎn)動(dòng) content.onmouseover=function(){ clearInterval(timer); timer=setInterval(function(){ rightBtn.onclick(); },3000) } //鼠標(biāo)移出又開啟定時(shí)器 content.onmouseleave=function(){ clearInterval(timer); timer=setInterval(function(){ rightBtn.onclick(); },1500) } }
代碼可能寫的不是很好,存在很多不足,歡迎大家指點(diǎn)批評(píng),我會(huì)努力去改正,有疑問歡迎留言,我會(huì)盡力去解答,謝謝大家花寶貴的時(shí)間來閱讀這篇文章。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解Bootstrap網(wǎng)格垂直和水平對(duì)齊方式
網(wǎng)格在網(wǎng)頁布局中是一個(gè)重點(diǎn)和難點(diǎn),布局是網(wǎng)頁設(shè)計(jì)的起點(diǎn)和基礎(chǔ),本文主要介紹了Bootstrap網(wǎng)格垂直和水平對(duì)齊方式,感興趣的可以了解一下2021-07-07javascript判斷iphone/android手機(jī)橫豎屏模式的函數(shù)
iphone能很好的使用onorientationchange事件,但是android的onresize事件即使不旋轉(zhuǎn)也會(huì)觸發(fā)多次2011-12-12js實(shí)現(xiàn)的類似QQ的等級(jí)的代碼
類似QQ等級(jí)2008-09-09javascript實(shí)現(xiàn)tabs選項(xiàng)卡切換效果(擴(kuò)展版)
常用的頁面效果有彈出層效果,無縫滾動(dòng)效果,選項(xiàng)卡切換效果,接下來與大家分享一款自己用原生javascript寫的選項(xiàng)卡切換效果在原有的基礎(chǔ)上進(jìn)行了擴(kuò)展,加入了自動(dòng)輪播,這樣就變成了類似圖片輪播的效果2013-03-03JavaScript新增的兩個(gè)原始數(shù)據(jù)類型詳解(Record和Tuple)
js中原始數(shù)據(jù)類型有Number、String、Boolean、Null、Undefined、Symbol (ES6引入的數(shù)據(jù)類型),引用的數(shù)據(jù)類型有Object,Array,Function,下面這篇文章主要給大家介紹了關(guān)于JavaScript新增兩個(gè)原始數(shù)據(jù)類型(Record和Tuple)的相關(guān)資料,需要的朋友可以參考下2022-03-03JS清除文本框內(nèi)容離開在恢復(fù)及鼠標(biāo)離開文本框時(shí)觸發(fā)js的方法
多網(wǎng)站的需要填寫的文本框在默認(rèn)狀態(tài)下都會(huì)給出一個(gè)默認(rèn)的提示語言,當(dāng)鼠標(biāo)點(diǎn)擊此文本框的時(shí)候能夠?qū)⒗锩娴哪J(rèn)文本清除,當(dāng)刪除輸入的文本且焦點(diǎn)離開文本框的時(shí)候再將默認(rèn)的文本寫入文本框2016-01-01js實(shí)現(xiàn)簡單數(shù)字變動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)數(shù)字變動(dòng)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11