原生js實現簡單輪播圖
本文實例為大家分享了js實現簡單輪播圖的具體代碼，供大家參考，具體內容如下
一、寫入網頁基本結構
body:
網頁的最外部設置一個id為wrap的容器，取代body，這樣方便我們做一些初始化
css:
初始化：
包括外邊距margin、內邊距padding、鏈接a、圖片img、輸入框input、列表ul、li、網頁html、body一系列初始化
css設置：
根據圖片數與圖片寬度設置輪播圖寬度
二、設置js邏輯
需要完成的功能有：
1、鼠標移入輪播圖逐漸出現左右浮動塊2、點擊浮動塊切換圖片3、點擊小圓點切換圖片4、切換圖片同時切換小圓點5、自動播放6、鼠標移入輪播圖自動播放停止、移出恢復自動播放
代碼如下：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style type='text/css'> *{ margin: 0; padding: 0; } a{ text-decoration: none; } ul,li{ list-style: none; } img{ display: block; } input{ outline: none; } html,body{ height: 100%; overflow: hidden; } .content{ position: absolute; top: 0; left: 0; } .banner{ width: 600px; height: 400px; position: relative; margin: 50px auto; overflow: hidden; } .banner .bannerList{ position: absolute; left:-600px; top: 0; width: 4800px; height: 100%; } .banner .bannerList li{ float: left; width: 600px; height: 400px; } .banner .bannerList li img{ height: 100%; width: 100%; } .banner .left,.banner .right{ position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 50px; border: solid 2px gray; font-size:30px; text-align: center; line-height: 50px; color: rgb(255, 255, 255); opacity: 0; transition: 1000ms; } .banner .left{ left: 0px; } .banner .right{ right: 0px; } .banner .point{ position: absolute; bottom: 30px; left:50%; transform: translateX(-50%); } .banner .point li{ float: left; width: 15px; height: 15px; border-radius: 50%; background-color: gray; margin: 5px; } </style> <script type='text/javascript'> window.onload=function(){ var bannerLeft=document.querySelector(’.banner .left’); var bannerRight=document.querySelector(’.banner .right’); var banner=document.querySelector(’.banner’) var bannerList=document.querySelector(’.banner .bannerList’) var liList=document.querySelectorAll(’.banner .bannerList li’) var pointList=document.querySelectorAll(’.banner .point li’) var start=-600; timer2=setInterval(function(){ //設置定時器，自動播放 var a=30; var index=bannerList.offsetLeft/-600+1; if(bannerList.offsetLeft==-4200){ bannerList.style.left=-600+’px’ //無縫操作 index=2; } if(bannerList.offsetLeft==-3600){ index=1; } for(var i=0;i<pointList.length;i++){ pointList[i].style.backgroundColor=’grey’ } pointList[index-1].style.backgroundColor=’red’; timer3=setInterval(function(){ a=a-1 bannerList.style.left=bannerList.offsetLeft-20+’px’;if(a==0){ clearInterval(timer3) } }, 30) if(bannerList.offsetLeft==-4200){ bannerList.style.left=-600+’px’; } },4000) // 創建一個移入出現函數 banner.addEventListener(’mouseover’,occur) function occur(){ bannerLeft.style.opacity=1; //移入逐漸出現 bannerRight.style.opacity=1; clearInterval(timer2); //移入取消自動播放 } banner.addEventListener(’mouseout’,function(){ bannerLeft.style.opacity=0; bannerRight.style.opacity=0; //移出消失 timer2=setInterval(function(){ //移出恢復自動播放 var a=30; timer3=setInterval(function(){ a=a-1 bannerList.style.left=bannerList.offsetLeft-20+’px’;if(a==0){ clearInterval(timer3) } }, 30) if(bannerList.offsetLeft==-4200){ bannerList.style.left=-600+’px’; } },4000) }) //設置左右浮動塊點擊變色以及滾動 function colorChange(){ this.style.color=’black’; if(this.className==’right’){ //判斷是哪邊被點擊 var index=bannerList.offsetLeft/-600+1; var a=30; timer=setInterval(function(){ //點擊浮動塊切換圖片 a=a-1; bannerList.style.left=bannerList.offsetLeft-20+’px’; if(a!=0){ bannerRight.removeEventListener(’mousedown’,colorChange) bannerLeft.removeEventListener(’mousedown’,colorChange) } if(a==0){ clearInterval(timer); bannerRight.addEventListener(’mousedown’,colorChange) bannerLeft.addEventListener(’mousedown’,colorChange) } },30) if(bannerList.offsetLeft==-4200){ bannerList.style.left=-600+’px’ index=2; } if(bannerList.offsetLeft==-3600){ index=1; } for(var i=0;i<pointList.length;i++){ pointList[i].style.backgroundColor=’grey’ } pointList[index-1].style.backgroundColor=’red’; } else{ var a=30; var index=bannerList.offsetLeft/-600-1; timer=setInterval(function(){ a=a-1; bannerList.style.left=bannerList.offsetLeft+20+’px’; if(a!=0){ bannerLeft.removeEventListener(’mousedown’,colorChange) bannerRight.removeEventListener(’mousedown’,colorChange) } if(a==0){ clearInterval(timer); bannerLeft.addEventListener(’mousedown’,colorChange) bannerRight.addEventListener(’mousedown’,colorChange) } },30) if(bannerList.offsetLeft==0){ bannerList.style.left=-3600+’px’ index=5; } if(bannerList.offsetLeft==-600){ index=6; } for(var i=0;i<pointList.length;i++){ pointList[i].style.backgroundColor=’grey’ } pointList[index-1].style.backgroundColor=’red’; } } function colorReturn(){ this.style.color=’white’ } bannerLeft.addEventListener(’mousedown’,colorChange) bannerRight.addEventListener(’mousedown’,colorChange) bannerLeft.addEventListener(’mouseup’,colorReturn) bannerRight.addEventListener(’mouseup’,colorReturn) for(var i=0;i<pointList.length;i++){ pointList[i].onmousedown=function(){ for(var i=0;i<pointList.length;i++){ pointList[i].style.backgroundColor=’gray’ } this.style.backgroundColor=’red’; for(var b=0;b<pointList.length;b++){ if(pointList[b].style.backgroundColor==this.style.backgroundColor){ var a=30; var step=-(b+1)*600-bannerList.offsetLeft; timer1=setInterval(function(){ a=a-1; bannerList.style.left=bannerList.offsetLeft+step/30+’px’; if(a!=0){ bannerLeft.removeEventListener(’mousedown’,colorChange) bannerRight.removeEventListener(’mousedown’,colorChange) } if(a==0){ clearInterval(timer1) bannerLeft.addEventListener(’mousedown’,colorChange) bannerRight.addEventListener(’mousedown’,colorChange) } },20) } } } } } </script></head><body> <div id='wrap'> <!-- 寫出輪播圖框架 --> <div class='banner'> <ul class='bannerList'> <li> <img src='http://www.aoyou183.cn/bcjs/img/james6.jpeg'> </li> <li> <img src='http://www.aoyou183.cn/bcjs/img/james1.jpg'> </li> <li> <img src='http://www.aoyou183.cn/bcjs/img/james2.jpg'> </li> <li> <img src='http://www.aoyou183.cn/bcjs/img/james3.jpg'> </li> <li> <img src='http://www.aoyou183.cn/bcjs/img/james4.jpg'> </li> <li> <img src='http://www.aoyou183.cn/bcjs/img/james5.jpeg'> </li> <li> <img src='http://www.aoyou183.cn/bcjs/img/james6.jpeg'> </li> <li> <img src='http://www.aoyou183.cn/bcjs/img/james1.jpg'> </li> </ul> <!-- 左右兩個箭頭 --> <span class='left'> < </span> <span class='right'> > </span> <!-- 添加小圓點 --> <ul class='point'> <li style='background-color: red;'></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> </body></html>
其中，將圖片替換為其他圖片可以實現不同的輪播圖，值得一提的是，六張圖片的輪播圖需要放八張圖，第八張與第二張一致，第一張與第七張一致，真正呈現出來的僅僅是第二張到第七張
精彩專題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
網公網安備