網頁輪播圖程式碼分享(html+css+原生js)
阿新 • • 發佈:2022-05-12
網頁輪播圖是我們網頁常常需要使用的效果,現在也有各種框架或是外掛可以很好地實現網頁輪播圖,但瞭解其佈局及js實現原理也是很有必要的,尤其是對於剛接觸js的人,學會輪播圖的實現原理,對js的理解及深入學習也是大有裨益的,於是跟著視訊教學,編寫了網頁輪播圖,程式碼分享如下:
一、html佈局程式碼
<body> <div class="mylunbo"> <a href="javascript:;" class="arrow-l"><</a> <a href="javascript:;" class="arrow-r">></a> <ul> <li> <a href="#"><img src="2.png" width="720" height="432" alt="" /></a> </li> <li> <a href="#"><img src="1.png" width="720" height="432" alt="" /></a> </li> <li> <a href="#"><img src="3.jpeg" width="720" height="432" alt="" /></a> </li> <li> <a href="#"><img src="4.jpeg" width="720" height="432" alt="" /></a> </li> </ul> <ol class="circle"> </ol> </div> </body>
二、css層疊樣式表
*{ padding:0; margin:0; } .mylunbo{ margin:20px auto; position: relative; width: 720px; height: 432px; /*background-color: purple;*/ overflow: hidden; } img{ width:720px; height:432px; } .mylunbo ul{ position: absolute; top: 0; left: 0; width:500%; } ul li{ float:left; list-style-type: none; } ol li{ list-style-type: none; } .arrow-l, .arrow-r { display: none; position: absolute; top: 50%; margin-top: -20px;/*高度40,上移20*/ width: 24px; height: 40px; background: rgba(0, 0, 0, .3); text-align: center; line-height: 40px; color: #fff; font-family: 'icomoon'; font-size: 18px; z-index: 2; } .arrow-r { right: 0; } .circle { position: absolute; bottom: 10px; left: 350px; } .circle li { float: left; width: 8px; height: 8px; /*background-color: #fff;*/ border: 2px solid rgba(240, 120, 120, 0.5); margin: 0 3px; border-radius: 50%; /*滑鼠經過顯示小手*/ cursor: pointer; } .current { background-color: #fff; } a:hover{ color:red; }
三、js程式碼(animate.js+index.js)
function animate(obj,length,callback){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var step=(length-obj.offsetLeft)/10; // 緩動效果,步長=(目標值-當前值)/10 step=step>0 ? Math.ceil(step) : Math.floor(step); if(obj.offsetLeft==length){ clearInterval(obj.timer); if(callback) callback(); //callback && callback() } obj.style.left=obj.offsetLeft+step+'px'; },15); }
window.addEventListener('load',function(){ const lunbo=document.querySelector(".mylunbo"); const arrowl=document.querySelector(".arrow-l"); const arrowr=document.querySelector(".arrow-r"); var num=0; // 左右移動按鈕定點陣圖片 var circle=0; // 定位小圓點 var flag=true; // 節流閥 //1、右側按鈕,左側按鈕 lunbo.addEventListener('mouseenter',function(){ arrowl.style.display='block'; arrowr.style.display='block'; clearInterval(timer); // 清楚計時器,輪播圖不自動播放 //timer=null; // 清楚timer變數 }); lunbo.addEventListener('mouseleave',function(){ arrowl.style.display='none'; arrowr.style.display='none'; timer=setInterval(function(){ arrowr.click(); },2000); }); //2、建立小圓點 const ul=lunbo.querySelector("ul"); const ol=lunbo.querySelector("ol"); for(let i=0;i<ul.children.length;i++){ // 根據圖片數量生成小圓點 let li=document.createElement("li"); li.setAttribute('index',i); // 新增自定義屬性index ol.appendChild(li); //3、新增小圓圈點選事件 li.onclick=function(){ for(let i=0;i<ol.children.length;i++){ ol.children[i].className=''; } this.className='current'; //4、小圓圈動畫 let lunbowidth=lunbo.offsetWidth; let index=this.getAttribute('index'); num=circle=index; // 點選小圓點時,將num和circle的值賦值為index,即將小圓點順序和左右按鈕的num定位到當前圖片 animate(ul,-index*lunbowidth); // 呼叫動畫函式,-index*lunboWidth為終點位置 } } //5、克隆子元素-->ABCDA,此時最後一張圖為第一張圖的複製!! let child=ul.children[0].cloneNode(true); ul.appendChild(child); ol.children[0].className='current'; //6、右側按鈕點選事件 arrowr.addEventListener('click',function(){ if(flag){ flag=false; // 未完成輪播動畫,不能輪播,設定為false if(num==ul.children.length-1){ ul.style.left=0; // 當點選到最後一個圖片時,即和第一幅圖相同的那張,num為ul.children.length-1,先切換到第一張(很快),執行動畫切換到第二張 num=0; // num重新設為0,後面再加1 } num++; animate(ul,-num*lunbo.offsetWidth,function(){ flag=true; // 將flag設定為true,可以再次點選輪播 }); circle++; if(circle==ol.children.length) // 當小圓圈移動到最後,點選右移,circle+1,此時circle為ol.children.length circle=0; setCurrent(); } }) //7、左側點選事件 arrowl.addEventListener('click',function(){ if(flag){ flag=false; if(num==0){ num=ul.children.length-1; // 當輪播圖為第一張圖時,num設為最後一張圖的index,之後再減一 ul.style.left=-num*lunbo.offsetWidth+'px'; // 先切換到最後一張圖,之後再呼叫動畫函式到實際倒數第二圖 } num--; animate(ul,-num*lunbo.offsetWidth,function(){ flag=true; }); circle--; if(circle==-1) // 當小圓圈在第一個位置時,點選左移,circle-1,此時circle為-1 circle=ol.children.length-1; setCurrent(); } }); var timer=setInterval(function(){ arrowr.click(); },2000); function setCurrent(){ for(let i=0;i<ol.children.length;i++){ ol.children[i].className=''; } ol.children[circle].className='current'; } })
原始碼分享:
連結:https://pan.baidu.com/s/1DrXnGKlahm4XhdCmTjFvDg
提取碼:2ldh