js實現滑動輪播效果
阿新 • • 發佈:2021-09-23
本文例項為大家分享了實現滑動輪播效果的具體程式碼,供大家參考,具體內容如下
1、構建html樣式,程式碼如下
<div class="banner"> <ul> <li> <a href="#" > <img src="images/1.jpeg"> </a> </li> <li> <a href="#" > <img src="./images/2.jpg"> </a> </li> <li> <a href="#" > <img src="./images/3.jpg"> </a> </li> <li> <a href="#" > <img src="./images/4.jpg"> </a> </li> <li> <a href="#" > <img src="./images/5.jpg"> </a> </li> </ul> <ol> </ol> <a href="#" class="left"><</a> <a href="#" class="right">></a> </div>
2、瞭解html基本結構 圖片的路徑可以根據自己來,把html結構用樣式簡單修飾,程式碼如下
<style> *{ pwww.cppcns.comadding: 0; margin: 0; list-style: none; text-decoration: none; color:#000; } .banner{ width: 500px; height: 300px; margin:50px auto; position: relative; border:1px solid #000; overflow:hidden; } .banner ul{ position: absolute; left: 0; top: 0; height: 300px; /* width: 2500px; */ } .banner ul li{ width: 500px; height: 300px; float:left; } .banner ul li a img{ width: 500px; height: 300px; } .banner ol{ /* width: 100px; */ height: 20px; position:absolute; bottom:10px; background-color: rgba(255,255,.7); left:50%; transform: translateX(-50%); border-radius:10px; display: flex; justify-content: spawww.cppcns.comce-evenly; align-items: center; } /* .banner ol li{ width: 10px; YcANj height: 10px; border-radius:50%; background-color: skyblue; } */ .banner>a{ width: 20px; height: 40px; position:absolute; top:50%; transform: translateY(-50%); background-color: rgba(10,10,.5); font-size:20px; color:#fff; line-height: 2; text-align: center; } .banner>a.left{ left: 0; } .banner>a.right{ right: 0; }
3、基本佈局結束後用js來實現輪播,程式碼如下
var div = document.querySelector('.banner'); var ul = document.querySelector('ul'); var ol = document.querySelector('ol'); var left = document.querySelector('a.left'); var right = document.querySelector('a.right'); // 設定一個變數index 作為下標的使用 var index = 1; // 遍歷ul下面的li for(var i=0;i<ul.children.length;i++){ // 一個ul下面的li要對應一個下面的小圓點按鈕 // 建立同等數量的小圓點 var li = document.createElement('li'); setStyle(li,{ width: "10px",height: "10px","border-radius":"50%","background-color": "skyblue" }) // 把建立好的li 全部放到ol 這個大盒子裡 ol.appendChild(li); } // ol這個大盒子本身是沒有寬度的 我們要根據裡面的小圓點數量 設定ol大盒子的寬度 ol.style.width = ol.firstElementChild.offsetWidth*ul.children.length*2 + 'px'; // 設定一個變數 這個變數是代表有樣式的那個小圓點 var that = ol.children[index-1]; //給ol第一個兒子設定紅色 that.style.background = 'red'; // 實現滑動輪播更好的銜接,前後給ul各補一個li。 var lastLi = ul.lastElementChild.cloneNode(true); var firstLi = ul.firstElementChild.cloneNode(true); // 把複製好的標籤分別放在ul大盒子的前面和後面 ul.appendChild(firstLi); ul.insertBefore(lastYcANjLi,ul.firstElementChild); // 因為ul下面的子元素髮生了變化 我們要給ul 設定相應的寬度 ul.style.width = ul.children.length*lastLi.offsetWidth + 'px'; // 因為我們滑動是從右往左滑動的 所以要給ul 的left值取負 ul.style.left = -ul.firstElementChild.offsetWidth + 'px'; // 設定變數 後面賦值給定時器 var timeId; // 定義一個開關 var flag = true; //右鍵點選 right.onclick = function(){ // 如果開關沒開啟 就返回一個false if(!flag){ return false; } // 並把返回值賦值給 開關 說明開關關閉 再次點選就沒有效果 flag = false; // 前面我們定義了一個index 每當我們點選一下就index++ index++; // 呼叫 move 函式 move(ul,{left:-index*ul.children[0].offsetWidth},function(){ // 把需要做的事情放在運動結束後的函式裡面 // 首先我們要給index 進行判斷 ul總共七個子元素 index對應的是ul子元素的下標 所以 index是不能超過 ul.children.length-1; if(index ==ul.children.length-1){ // 如果index等於ul.children.length-1 // 就重新給index賦值為1 indewww.cppcns.comx = 1; // 並且也要給ul 的left值重新賦值 ul.style.left = -index*ul.children[0].offsetWidth + 'px'; } // 小圓點也要跟著圖片一起動才行 // 我們給圖片對應的那個小圓點設定成變數that 因為小圓點本身會有樣式 先給它設定樣式為預設的 that.style.backgroundColor = 'skyblue'; // 對應的這個小圓點的樣式就發生了變化 ol.children[index-1].style.backgroundColor = 'red'; // 樣式轉換成功後 在把含有樣式的小圓點賦值為變數that that = ol.children[index-1]; // 運動的最後面要把 開關開啟 可以讓右擊再次開啟 flag = true; }) } //左鍵點選 left.onclick = function(){ if(!flag){ return false; } flag = false; // 左點選是從左往右滑動的就變成了index-- index--; move(ul,function(){ if(index ==ul.children.length-1){ index = 1; ul.style.left = -index*ul.children[0].offsetWidth + 'px'; } // 進入事件後首先判斷 index的 值 if(index==0){ // 如果index的值變成0就重新給index賦值 index = ul.children.length-2; // 並且重新給ul的left賦值為第二張圖片的值 ul.style.left = -index * firstLi.offsetWidth + "px" } that.style.backgroundColor = 'skyblue'; ol.children[index-1].style.backgroundColor = 'red'; that = ol.children[index-1]; flag = true; }) } // 遍歷ol下面的所有li for(let i=0;i<ol.children.length;i++){ // 點選小圓點事件 ol.children[i].onclick = function(){ if(!flag){ return false; } flag = false; // 因為小圓點的下邊比 圖片的下標少1 在小圓點點選事件中就要給index重新賦值 // 讓小圓點和圖片能對應上 index = i+1; move(ul,{left:-index*firstLi.offsetWidth},function(){ // if(index == 0){ // index = ul.children.length-2 // ul.style.left = -index.ul.children[0].offsetWidth + 'px' // } that.style.backgroundColor = 'skyblue'; ol.children[index-1].style.backgroundColor = 'red'; that = ol.children[index-1]; flag = true; }) } }; // 自動輪播 timeId = setInterval(function(){ if(!flag){ return false; } flag = false; index++; move(ul,function(){ if(index == ul.children.length-1){ index = 1 ul.style.left = -index*ul.children[0].offsetWidth + 'px' } that.style.backgroundColor = 'skyblue'; ol.children[index-1].style.backgroundColor = 'red'; that = ol.children[index-1]; flag = true; }) },2000); // 滑鼠劃過輪播停止 div.onmouseover = function(){ clearInterval(timeId); } //滑鼠離開後 在進行自動輪播 div.onmouseout = function(){ timeId = setInterval(function(){ if(!flag){ return false; } flag = false; index++; move(ul,function(){ if(index == ul.children.length-1){ index = 1 ul.style.left = -index*ul.children[0].offsetWidth + 'px' } that.style.backgroundColor = 'skyblue'; ol.children[index-1].style.backgroundColor = 'red'; that = ol.children[index-1]; flag = true; }) },1000); }; //封裝好的多運動函式 function move(ele,obj,fn){ let timeObj = {}; for(let attr in obj){ timeObj[attr] = setInterval(function(){ var target = parseFloat(obj[attr]); if(attr === 'opacity'){ target*=100 } var t = parseFloat(getStyle(ele,attr)); if(attr === 'opacity'){ t *=100 } console.log(t) if((target-t)/100>0){ var percent = Math.ceil((target-t)/100); }else{ var percent = Math.floor((target-t)/100); } t += percent; if(attr === 'opacity'){ ele.style[attr] = t/100 }else{ ele.style[attr] = t + 'px'; } if(t == target){ clearInterval(timeObj[attr]) delete timeObj[attr] let k = 0; for(let i in timeObj){ k++; } if( k==0){ fn(); console.log(123) } } },10) } } // 封裝好的獲取樣式的函式 function getStyle(ele,attr){ if(window.getComputedStyle){ return window.getComputedStyle(ele)[attr]; }else{ return ele.currentStyle[attr]; } } // 封裝設定樣式的函式 function setStyle(ele,styleObj){ for(var attr in styleObj){ ele.style[attr] = styleObj[attr]; } };
4、輪播需要的圖片如下
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。