javascript實現花樣輪播效果
本文實例為大傢分享瞭javascript實現花樣輪播效果的兩種實現方法,供大傢參考,具體內容如下
第一種:簡單的帶按鈕的輪播
介紹:左右按鈕控制輪播,點擊左按鈕切換上一張圖片,點擊右按鈕切換下一張
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"); // 要進來的 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++; // 要走的索引永遠是進來的索引-1 this.iPrev = this.iNow - 1; } } // 根據索引開始運動 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進來 // 從-1000,進到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();
第二種:自動輪播
介紹:兩個左右按鈕可以控制圖片左右切換,下面帶有數字的按鈕,點擊數字幾,就可以切換到第幾張,自動輪播的過程中,鼠標進入停止輪播,鼠標離開繼續輪播
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.觸發事件時,執行改變索引,同時將點前點擊的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){ // 根據左右按鈕傳入的狀態:左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.創建對應圖片數量的span,同時編號 var str = ``; for(var i=0;i<this.child.length;i++){ str += `<span index='${i}'>${i+1}</span>`; } this.list.innerHTML = str; // L2.設置默認的當前項 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.確定要走的索引和要進來的索引 // this.iNow 要走的 // 拿到點擊的span的編號 要進來的 var index = parseInt(tar.getAttribute("index")); // console.log(this.iNow, index); // L6-1.判斷方向 if(index > this.iNow){ // L7-1.向左運動 this.listMove(1,index); } // L6-2.判斷方向 if(index < this.iNow){ // L7-2.向右運動 this.listMove(-1,index); } // L8.將當前點擊的索引設置成下次要走的索引 this.iNow = index; // L9.根據修改之後的索引,設置當前項 this.setActive(); } listMove(direct,index){ // this.iNow走 // 從哪走,走到哪 this.child[this.iNow].style.left = 0; move(this.child[this.iNow],{left:-1000 * direct}) // index進來 // 從哪進來,進到哪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();
兩個案例 js 裡面的move是一個緩沖運動的封裝,代碼如下:
function move(ele,obj,cb){ clearInterval(ele.t); ele.t = setInterval(() => { // 假設狀態為:可以清除計時器 var i = true; // 因為在計時器中才開始使用到對象中的信息,所以在計時器中遍歷 // 並提前換來的屬性和目標變量 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); // 隻要有一個屬性到目標,就停瞭,不對 // 必須所有屬性到目標,才能停 // 隻要有一個屬性沒到目標,絕對不能停 // 用狀態來標記到底要不要停止計時器 // 隻要有一個屬性沒到目標:絕對不能清除計時器 if(iNow !== obj[attr]){ i = false; } if(attr == "opacity"){ ele.style.opacity = (iNow + speed)/100; }else{ ele.style[attr] = iNow + speed + "px"; } } // 如果每次計時器執行結束,所有屬性都執行瞭一遍之後,狀態還是true,表示,沒有被改成false,如果沒有被改成false,表示沒有屬性沒到終點,那麼狀態還是false就不清除 if(i){ clearInterval(ele.t); // 用戶決定在動畫結束時要執行的功能,萬一用戶沒傳參,做個默認判斷 if(cb){ cb(); } // cb && cb(); } }, 30); } function getStyle(ele,attr){ if(ele.currentStyle){ return ele.currentStyle[attr]; }else{ return getComputedStyle(ele,false)[attr]; } }
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。