原生JS實現圖片輪播
阿新 • • 發佈：2018-01-05
讓其 gin 偏移量 adding char 效率 lin doc 動畫效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>大圖滾動</title> <style type="text/css"> *{ margin:0; padding:0; border:0; } .clear{ *zoom:1; }.clear:after{ visibility: none; content:""; display:block; clear:both; height:0; } #wrap{ width: 510px; height:286px; margin:0 auto; position:relative; background: pink; overflow: hidden; } #inner{ width: 1000%; height:100%; position:absolute; left:0; top:0; } #inner img{ width:10%; height:100%; float: left; }.paganation{ width: 100%; position: absolute; bottom:10px; text-align:center; } .paganation span{ padding:5px 8px; background: #F2F2F2; color:red; border-radius:50%; cursor: pointer } .paganation .selected{ background: red; color:white; } .arrow{ position:absolute; top:0; width: 30px; height: 286px; line-height: 286px; text-align: center; color: red; cursor: pointer; } #right{ right: 0; } .arrow:hover{ background: rgba(0,0,0,0.5); } </style> </head> <body> <div id="wrap"><!-- 圖片展示區 --> <div id="inner" class="clear"><!-- 所有圖片並排的塊 --> <img style="background:red;" src="img/1.jpg" alt=""> <img style="background:orange;" src="img/2.jpg" alt=""> <img style="background:green;" src="img/3.jpg" alt=""> <img style="background:cyan;" src="img/4.jpg" alt=""> <img style="background:yellow;" src="img/5.jpg" alt=""> <img style="background:purple;" src="img/6.jpg" alt=""> <img style="background:pink;" src="img/7.jpg" alt=""> <img style="background:blue;" src="img/8.jpg" alt=""> <img style="background:red;" src="img/1.jpg" alt=""> </div> <div class="paganation" id="paganation"><!-- 頁面按鈕區域 --> <span class ="selected">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span> </div> <div id="left" class="arrow"><</div><!-- 向左切換按鈕 --> <div id="right" class="arrow">></div><!-- 向右切換按鈕 --> </div> <script type="text/javascript"> var wrap=document.getElementById("wrap"); var inner=document.getElementById("inner"); var spanList=document.getElementById("paganation").getElementsByTagName("span"); var left=document.getElementById("left"); var right=document.getElementById("right"); var clickFlag=true;//設置左右切換標記位防止連續按 var time//主要用來設置自動滑動的計時器 var index=0;//記錄每次滑動圖片的下標 var Distance=wrap.offsetWidth;//獲取展示區的寬度，即每張圖片的寬度 //定義圖片滑動的函數 function AutoGo(){ var start=inner.offsetLeft;//獲取移動塊當前的left的開始坐標 var end=index*Distance*(-1);//獲取移動塊移動結束的坐標。 //計算公式即當移動到第三張圖片時，圖片下標為2乘以圖片的寬度就是塊的left值。 var change=end-start;//偏移量 var timer;//用計時器為圖片添加動畫效果 var t=0; var maxT=50;//滑動的效率 clear();//先把按鈕狀態清除,再讓對應按鈕改變狀態 if(index==spanList.length){ spanList[0].className="selected"; }else{ spanList[index].className="selected"; } clearInterval(timer);//開啟計時器前先把之前的清 timer=setInterval(function(){ t++; if(t>=maxT){//當圖片到達終點停止計時器 clearInterval(timer); clickFlag=true;//當圖片到達終點才能切換 } inner.style.left=change/maxT*t+start+"px";//每個17毫秒讓塊移動 if(index==spanList.length&&t>=maxT){ inner.style.left=0; index=0; //當圖片到最後一張時把它瞬間切換回第一張，由於都同一張圖片不會影響效果 } },17); } //編寫圖片向右滑動的函數 function forward(){ index++; //當圖片下標到最後一張把小標換0 if(index>spanList.length){ index=0; } AutoGo(); } //編寫圖片向左滑動函數 function backward(){ index--; //當圖片下標到第一張讓它返回到倒數第二張， //left值要變到最後一張才不影響過渡效果 if(index<0){ index=spanList.length-1; inner.style.left=(index+1)*Distance*(-1)+"px"; } AutoGo(); } //開啟圖片自動向右滑動的計時器 time=setInterval(forward,3000); //設置鼠標懸停動畫停止 wrap.onmouseover=function(){ clearInterval(time); } wrap.onmouseout=function(){ time=setInterval(forward,3000); } //遍歷每個按鈕讓其切換到對應圖片 for(var i=0;i<spanList.length;i++){ spanList[i].onclick=function(){ index=this.innerText-1; AutoGo(); } } //左切換事件 left.onclick=function(){ if(clickFlag){ backward(); } clickFlag=false; } //右切換事件 right.onclick=function(){ if(clickFlag){ forward(); } clickFlag=false; } //清除頁面所有按鈕狀態顏色 function clear(){ for(var i=0;i<spanList.length;i++){ spanList[i].className=""; } } </script> </body> </html>
原生JS實現圖片輪播