js實現輪播圖
阿新 • • 發佈:2020-12-31
1、index.html
<div id="banner_id" style="display: flex;justify-content: center;"> <div class="banner_box"> <header class="header_box"> <img src="./front/images/intro/1.png" alt=""> <img src="./front/images/intro/4.png"alt=""> <img src="./front/images/intro/3.png" alt=""> <img src="./front/images/intro/5.png" alt=""> <img src="./front/images/intro/1.png" alt=""> </header> <button class="banner_btn"> > </button><button class="banner_btn"> < </button> <ul class="ul_box"> <li class="ul_li"></li> <li class="ul_li"></li> <li class="ul_li"></li> <li class="ul_li"></li> </ul> </div> </div>
2.style.css
@chatset "utf-8"; .banner_box{ position: relative; overflow:hidden; /*!!!隱藏超出的部分*/ min-width: 1440px; max-height: 420px; width:1440px; /*這個div是用來顯示的最好和圖片寬高一樣*/ height: 420px; z-index:-1; } .header_box{ width: 7200px; height: 420px; position: relative; /*開啟偏移的設定*/ left: 0; } .banner_box button{ /*設定button 左右按鈕的設定*/ width: 35px; height: 35px; border:none; background: rgba(0,0,0,0.7); position: absolute; color:white; } .banner_box button:focus{outline:0;} .banner_box button:last-of-type{ /*向後的按鈕位置*/ top:50%; transform: translateY(-50%); } .banner_box button:first-of-type{ /*向前的按鈕位置*/ top:50%; right: 0; transform: translateY(-50%); } .banner_box ul{ width: 30%; height: 100px; position: absolute; bottom:0; left: 50%; transform: translateX(-50%); } .banner_box ul li{ /*小圓點是通過li的預設樣式*/ width: 25%; height: 100%; list-style-type: circle; list-style-position: inside; /*讓li的小圓點居中*/ line-height: 160px; float: left; text-align: center; font-size:22px; color:yellow; } .banner_box ul li:first-of-type{ /*第一個li預設選中所以為實心圓*/ list-style-type: disc; } .header_box img{ position: relative; display: block; float: left; z-index: -1; width: 1440px; height: 420px; }
3.index.js
window.onload=() => { var header = this.document.getElementsByClassName("header_box")[0]; var div = this.document.getElementsByClassName("banner_box")[0]; var buttons = this.document.getElementsByClassName("banner_btn"); var index=0; //翻滾的頁碼值 var timeout; /*var lis=document.querySelectorAll(".ul_li");*/ //獲取所有的li返回的是一個數組形式 var lis=this.document.getElementsByClassName("ul_li"); buttons[0].onclick=() =>{ //向前按鈕 move(index++) } buttons[1].onclick=() =>{ //向後按鈕 move(index--) } var newtime=setInterval(buttons[0].onclick, 5000); div.onmouseout=() =>{ newtime=setInterval(buttons[0].onclick, 5000); } div.onmouseover=()=>{ clearInterval(newtime) } for(i in lis){ //小圓點點選事件 lis[i].index=i //記錄下標值 lis[i].onclick=function(){ circle(this.index) move(this.index) index=this.index } } function circle(num){ if(num==4){ num=0; } for(i of lis){ i.style.listStyleType="circle" } lis[num].style.listStyleType="disc" } function move(){ var offleft,showW; clearInterval(timeout) timeout = setInterval(function(){ //緩慢移動 if(index>4){ index=1; header.style.left=0+"px"; }else if(index<0){ index=3; header.style.left=-(lis.length)*div.clientWidth+"px"; } offleft=header.offsetLeft; //總偏移值 showW=(-index*div.clientWidth-offleft)/10 //每次偏移值 if(showW>0){ //把數值向上走 showW=Math.ceil(showW) }else{ showW=Math.floor(showW) } circle(index); offleft=offleft+showW header.style.left=offleft+"px"; if(showW==0){ clearInterval(timeout) } }, 30); } }