javascript實(shí)現(xiàn)花樣輪播效果
本文實(shí)例為大家分享了javascript實(shí)現(xiàn)花樣輪播效果的兩種實(shí)現(xiàn)方法,供大家參考,具體內(nèi)容如下
第一種:簡單的帶按鈕的輪播
介紹:左右按鈕控制輪播,點(diǎn)擊左按鈕切換上一張圖片,點(diǎn)擊右按鈕切換下一張
html如下:
<div class="box"> <div class="imgbox"> <a><img src="img/banner1.jpg" alt=""></a> <a><img src="img/banner2.jpg" alt=""></a> <a><img src="img/banner3.jpg" alt=""></a> <a><img src="img/banner4.jpg" alt=""></a> <a><img src="img/banner5.jpg" alt=""></a> </div> <div class="btns"> <input type="button" id="left" value="<<<"> <input type="button" id="right" value=">>>"> </div>
css如下:
.box{width: 1000px;height: 300px;margin: 20px auto;position: relative;overflow: hidden;} .box .imgbox{} .imgbox a{width: 1000px;height: 300px;position: absolute;left:1000px;top:0;} .imgbox a:nth-child(1){left:0;} .imgbox img{width: 1000px;height: 300px;} .btns input{width: 40px;height: 40px;position: absolute;top:130px;border: none;background: rgba(200,200,200,0.5);} #left{left:0;} #right{right: 0;}}
js如下:
class Banner{ constructor(){ this.left = document.getElementById("left"); this.right = document.getElementById("right"); this.child = document.querySelectorAll(".imgbox a"); // 要進(jìn)來的 this.iNow = 0; // 要走的 this.iPrev = this.child.length - 1; } init(){ var that = this; this.left.addEventListener("click",function(){ that.changeIndex(1); }) this.right.addEventListener("click",function(){ that.changeIndex(2); }) } changeIndex(direct){ if(direct == 1){ if(this.iNow == 0){ this.iNow = this.child.length-1; this.iPrev = 0; }else{ this.iNow--; this.iPrev = this.iNow + 1; } }else{ if(this.iNow == this.child.length-1){ this.iNow = 0; this.iPrev = this.child.length-1; }else{ this.iNow++; // 要走的索引永遠(yuǎn)是進(jìn)來的索引-1 this.iPrev = this.iNow - 1; } } // 根據(jù)索引開始運(yùn)動(dòng) this.move(direct); } move(direct){ if(direct == 1){ // iPrev走 // 從0,走到1000 this.child[this.iPrev].style.left = 0; move(this.child[this.iPrev],{left:1000}); // iNow進(jìn)來 // 從-1000,進(jìn)到0 this.child[this.iNow].style.left = -1000 + "px"; move(this.child[this.iNow],{left:0}); }else{ this.child[this.iPrev].style.left = 0; move(this.child[this.iPrev],{left:-1000}); this.child[this.iNow].style.left = 1000 + "px"; move(this.child[this.iNow],{left:0}); } } } var b = new Banner(); b.init();
第二種:自動(dòng)輪播
介紹:兩個(gè)左右按鈕可以控制圖片左右切換,下面帶有數(shù)字的按鈕,點(diǎn)擊數(shù)字幾,就可以切換到第幾張,自動(dòng)輪播的過程中,鼠標(biāo)進(jìn)入停止輪播,鼠標(biāo)離開繼續(xù)輪播
htm代碼如下:
<div class="box"> <div class="imgbox"> <a><img src="../img/banner1.jpg" alt=""></a> <a><img src="../img/banner2.jpg" alt=""></a> <a><img src="../img/banner3.jpg" alt=""></a> <a><img src="../img/banner4.jpg" alt=""></a> <a><img src="../img/banner5.jpg" alt=""></a> </div> <div class="btns"> <input type="button" id="left" value="<<<"> <input type="button" id="right" value=">>>"> </div> <div class="list"> </div> </div>
css代碼如下:
.box{width: 1000px;height: 300px;margin: 20px auto;position: relative;overflow: hidden;} .box .imgbox{} .imgbox a{width: 1000px;height: 300px;position: absolute;left:1000px;top:0;} .imgbox a:nth-child(1){left:0;} .imgbox img{width: 1000px;height: 300px;} .btns input{width: 40px;height: 40px;position: absolute;top:130px;border: none;background: rgba(200,200,200,0.5);} #left{left:0;} #right{right: 0;} .list{width: 1000px;height: 30px;position: absolute;left: 0;bottom: 0;display: flex;background: rgba(200,200,200,0.5);} .list span{flex: 1;line-height: 30px;text-align: center;border-left:solid 1px black;border-right: solid 1px black;} .list span.active{background: red;color: #fff;}
js代碼如下:
class Banner{ constructor(){ this.left = document.getElementById("left"); this.right = document.getElementById("right"); this.child = document.querySelectorAll(".imgbox a"); this.list = document.querySelector(".list"); this.box = document.querySelector(".box"); this.iNow = 0; this.iPrev = this.child.length - 1; } init(){ var that = this; this.left.addEventListener("click",function(){ that.changeIndex(1); }) this.right.addEventListener("click",function(){ that.changeIndex(-1); }) // L3.事件委托綁定事件 this.list.onclick = function(eve){ var e = eve || window.event; var tar = e.target || e.srcElement; if(tar.tagName == "SPAN"){ // L4.觸發(fā)事件時(shí),執(zhí)行改變索引,同時(shí)將點(diǎn)前點(diǎn)擊的span傳入 that.listChangeIndex(tar); } } } changeIndex(direct){ if(direct == 1){ if(this.iNow == 0){ this.iNow = this.child.length-1; this.iPrev = 0; }else{ this.iNow--; this.iPrev = this.iNow + 1; } }else{ if(this.iNow == this.child.length-1){ this.iNow = 0; this.iPrev = this.child.length-1; }else{ this.iNow++; this.iPrev = this.iNow - 1; } } this.move(direct); } move(direct){ // 根據(jù)左右按鈕傳入的狀態(tài):左1,右-1 // 利用乘法 // 改變不同按鈕的方向問題 this.child[this.iPrev].style.left = 0; move(this.child[this.iPrev],{left:this.child[0].offsetWidth * direct}); this.child[this.iNow].style.left = -this.child[0].offsetWidth * direct + "px"; move(this.child[this.iNow],{left:0}); this.setActive(); } createList(){ // L1.創(chuàng)建對(duì)應(yīng)圖片數(shù)量的span,同時(shí)編號(hào) var str = ``; for(var i=0;i<this.child.length;i++){ str += `<span index='${i}'>${i+1}</span>`; } this.list.innerHTML = str; // L2.設(shè)置默認(rèn)的當(dāng)前項(xiàng) this.setActive(); } setActive(){ for(var i=0;i<this.list.children.length;i++){ this.list.children[i].className = ""; } this.list.children[this.iNow].className = "active"; } listChangeIndex(tar){ // L5.確定要走的索引和要進(jìn)來的索引 // this.iNow 要走的 // 拿到點(diǎn)擊的span的編號(hào) 要進(jìn)來的 var index = parseInt(tar.getAttribute("index")); // console.log(this.iNow, index); // L6-1.判斷方向 if(index > this.iNow){ // L7-1.向左運(yùn)動(dòng) this.listMove(1,index); } // L6-2.判斷方向 if(index < this.iNow){ // L7-2.向右運(yùn)動(dòng) this.listMove(-1,index); } // L8.將當(dāng)前點(diǎn)擊的索引設(shè)置成下次要走的索引 this.iNow = index; // L9.根據(jù)修改之后的索引,設(shè)置當(dāng)前項(xiàng) this.setActive(); } listMove(direct,index){ // this.iNow走 // 從哪走,走到哪 this.child[this.iNow].style.left = 0; move(this.child[this.iNow],{left:-1000 * direct}) // index進(jìn)來 // 從哪進(jìn)來,進(jìn)到哪s this.child[index].style.left = 1000 * direct + "px"; move(this.child[index],{left:0}); } autoPlay(){ var t = setInterval(()=>{ this.changeIndex(-1); },2000) this.box.onmouseover = function(){ clearInterval(t); } var that = this; this.box.onmouseout = function(){ t = setInterval(()=>{ that.changeIndex(-1); },2000) } // console.log(that); } } var b = new Banner(); b.init(); b.createList(); b.autoPlay();
兩個(gè)案例 js 里面的move是一個(gè)緩沖運(yùn)動(dòng)的封裝,代碼如下:
function move(ele,obj,cb){ clearInterval(ele.t); ele.t = setInterval(() => { // 假設(shè)狀態(tài)為:可以清除計(jì)時(shí)器 var i = true; // 因?yàn)樵谟?jì)時(shí)器中才開始使用到對(duì)象中的信息,所以在計(jì)時(shí)器中遍歷 // 并提前換來的屬性和目標(biāo)變量 for(var attr in obj){ if(attr == "opacity"){ var iNow = getStyle(ele,attr) * 100; }else{ var iNow = parseInt(getStyle(ele,attr)); } let speed = (obj[attr] - iNow)/10; speed = speed < 0 ? Math.floor(speed) : Math.ceil(speed); // 只要有一個(gè)屬性到目標(biāo),就停了,不對(duì) // 必須所有屬性到目標(biāo),才能停 // 只要有一個(gè)屬性沒到目標(biāo),絕對(duì)不能停 // 用狀態(tài)來標(biāo)記到底要不要停止計(jì)時(shí)器 // 只要有一個(gè)屬性沒到目標(biāo):絕對(duì)不能清除計(jì)時(shí)器 if(iNow !== obj[attr]){ i = false; } if(attr == "opacity"){ ele.style.opacity = (iNow + speed)/100; }else{ ele.style[attr] = iNow + speed + "px"; } } // 如果每次計(jì)時(shí)器執(zhí)行結(jié)束,所有屬性都執(zhí)行了一遍之后,狀態(tài)還是true,表示,沒有被改成false,如果沒有被改成false,表示沒有屬性沒到終點(diǎn),那么狀態(tài)還是false就不清除 if(i){ clearInterval(ele.t); // 用戶決定在動(dòng)畫結(jié)束時(shí)要執(zhí)行的功能,萬一用戶沒傳參,做個(gè)默認(rèn)判斷 if(cb){ cb(); } // cb && cb(); } }, 30); } function getStyle(ele,attr){ if(ele.currentStyle){ return ele.currentStyle[attr]; }else{ return getComputedStyle(ele,false)[attr]; } }
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js實(shí)現(xiàn)輪播圖的完整代碼
- 原生js實(shí)現(xiàn)輪播圖的示例代碼
- js實(shí)現(xiàn)支持手機(jī)滑動(dòng)切換的輪播圖片效果實(shí)例
- JS輪播圖實(shí)現(xiàn)簡單代碼
- js實(shí)現(xiàn)點(diǎn)擊左右按鈕輪播圖片效果實(shí)例
- JS實(shí)現(xiàn)自動(dòng)輪播圖效果(自適應(yīng)屏幕寬度+手機(jī)觸屏滑動(dòng))
- 使用html+js+css 實(shí)現(xiàn)頁面輪播圖效果(實(shí)例講解)
- JS實(shí)現(xiàn)左右無縫輪播圖代碼
- 原生js實(shí)現(xiàn)無限循環(huán)輪播圖效果
- js實(shí)現(xiàn)從左向右滑動(dòng)式輪播圖效果
相關(guān)文章
JavaScript DOM實(shí)現(xiàn)簡單留言板
這篇文章主要為大家詳細(xì)介紹了JavaScript DOM實(shí)現(xiàn)簡單留言板,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01JavaScript實(shí)現(xiàn)長圖滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)長圖滾動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04javascript生成/解析dom的CDATA類型的字段的代碼
javascript生成/解析dom的CDATA類型的字段的代碼...2007-04-04兩種方法實(shí)現(xiàn)在HTML頁面加載完畢后運(yùn)行某個(gè)js
這篇文章主要介紹了通過兩種方法實(shí)現(xiàn)在HTML頁面加載完畢后運(yùn)行某個(gè)js,需要的朋友可以參考下2014-06-06ant-design-pro使用qiankun微服務(wù)配置動(dòng)態(tài)主題色的問題
這篇文章主要介紹了ant-design-pro使用qiankun微服務(wù)配置動(dòng)態(tài)主題色,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-03-03