原生JavaScript實現豎直輪播圖
阿新 • • 發佈：2019-02-18
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="日常封裝函式.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> *{ margin: 0; padding: 0; } ul li,ol li{ list-style: none; } #wrap{ width: 1024px; height: 320px; border: 1px solid #000; margin: 100px auto; position: relative; overflow: hidden; } #wrap #list{ height: 320px; position: absolute; } #wrap #list li{ width: 1024px; height: 320px; } #wrap #list li img{ width: 1024px; height: 320px; display: block; } #wrap #prev{ width: 80px; height: 50px; font-size: 12px; position: absolute; top: 0; background: #fff; opacity: .5; border: 0; } #wrap #next{ width: 80px; height:50px; font-size: 12px; position: absolute; bottom: 0; background: #fff; opacity: .5; border: 0; } #wrap #bar{ position: absolute; bottom: 15px; left: 400px; } #wrap #bar li{ width: 20px; height: 20px; border-radius: 10px; background: blue; margin-left: 20px; float: left; text-align: center; line-height: 20px; color: #fff; cursor: pointer; } #wrap #bar .hover,#wrap #bar li:hover{ background: #fff; color: yellow; } </style> </head> <body> <div id="wrap"> <ul id="list"> <li><img src="img01.jpg" alt="" /></li> <li><img src="img02.jpg" alt="" /></li> <li><img src="img03.jpg" alt="" /></li> <li><img src="img04.jpg" alt="" /></li> <li><img src="img05.jpg" alt="" /></li> <li><img src="img01.jpg" alt="" /></li> </ul> <input type="button" id="prev" value="上一張" /> <input type="button" id="next" value="下一張" /> <ol id="bar"> <li class="hover">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> <script type="text/javascript"> var oList = document.getElementById("list"); var oLi = oList.children; var oLiheight = oLi[0].offsetHeight; var oBar = document.getElementById("bar"); var aLi = oBar.children; var i = 0; var timer = setInterval(function(){ move(); },3000); function move(){ i++; //當圖片達到最後一張後，i值在增大，就讓整個ul瞬間移回到初始位置，由於第一張與最後一張圖片一樣，這樣瞬間回去肉眼無法察覺，並讓顯示第二張，這樣達到輪迴的效果 if(i==oLi.length){ oList.style.top = 0; i = 1; } //當圖片達到最前面一張後，i在減小，就讓整個ul瞬間向後移動到末尾圖片位置，利用與之前一樣的原理達到輪迴效果 if(i==-1){ oList.style.top = -oLiheight*(oLi.length-1)+"px"; i = oLi.length-2; } //讓所有的角標都沒有hover效果 for(var j=0;j<aLi.length;j++){ aLi[j].className = ""; } //給當前的i值對應的角標新增hover效果，而當圖片達到最後一張時，由於第一張和最後一張一樣，於是就讓角標的第一個新增hover效果 if(i==oLi.length-1){ aLi[0].className = "hover"; }else{ aLi[i].className = "hover"; } //圖片列表的向上移動距離等於圖片的索引值乘以單張圖片高度 oList.style.top = animate(oList,{"top":-oLiheight*i}); } var oPrev = document.getElementById("prev"); var oNext = document.getElementById("next"); oPrev.onclick = function(){ //當點選上一張時，由於要執行move函式，在move中i++了，要達到上一張效果，於是就得i-2 i-=2; move(); } oNext.onclick = function(){ move(); } //滑鼠移入輪播圖區域停止自動切換圖片，移出後再次啟動切換 var oWrap = document.getElementById("wrap"); oWrap.onmouseover = function(){ clearInterval(timer); } oWrap.onmouseout = function(){ timer = setInterval(function(){ move(); },3000); } //角標滑鼠滑動事件 for(let k = 0;k<aLi.length;k++){ //給每個角標新增劃過事件，圖片多一張，因此i=k-1 aLi[k].onmouseover = function(){ i = k-1; move(); } } </script> </body> </html>