原生JavaScript實現水平輪播圖
阿新 • • 發佈：2019-02-09
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <script src="日常封裝函式.js" type="text/javascript" charset="utf-8"></script> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } ul,ol,li{ list-style: none; } img{ display: block; } #wrap{ width: 1024px; height: 320px; border: 2px solid #0000FF; position: relative; margin: 80px auto; overflow: hidden; } #wrap #list{ height: 320px; width: 600%; position: absolute; } #wrap #list li{ float: left; width: 1024px; height: 320px; } #wrap #list li img{ width: 1024px; height: 320px; } #wrap input{ width: 70px; height: 80px; background: #000; color: #fff; font-weight: 500; border: 0; opacity: .5; position: absolute; top: 50%; cursor: pointer; } #wrap #prev{ left: 0; margin-top: -40px; } #wrap #next{ right: 0; margin-top: -40px; } #wrap #bar{ position: absolute; bottom: 20px; left: 40%; } #wrap #bar li{ margin: 0 10px; width: 20px; height: 20px; background: #fff; color: #000; border-radius: 10px; float: left; text-align: center; line-height: 20px; cursor: pointer; } #wrap #bar .hover,#wrap #bar li:hover{ background: red; 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 oLiwidth = oLi[0].offsetWidth; var oBar = document.getElementById("bar"); var aLi = oBar.children; var i = 0; //自動切換 var timer = setInterval(function(){ move(); },3000); //控制移動函式 function move(){ i++; //最後一張 if(i==oLi.length){ oList.style.left = 0; i = 1; } //最前面一張 if(i==-1){ oList.style.left = -oLiwidth*(oLi.length-1)+"px"; i = oLi.length-2; } //角標顏色隨圖片變化 for(var j=0;j<aLi.length;j++){ aLi[j].className = ""; } //最後一張圖片時 if(i==oLi.length-1){ aLi[0].className = "hover"; }else{ //正常情況下 aLi[i].className = "hover"; } oList.style.left = animate(oList,{"left":-oLiwidth*i}); } //上一張，下一張切換 var oPrev = document.getElementById("prev"); var oNext = document.getElementById("next"); oPrev.onclick = function(){ i-=2; move(); } oNext.onclick = function(){ move(); } //角標劃過切換圖片 for(let k=0;k<aLi.length;k++){ aLi[k].onmouseover = function(){ i=k-1; move(); } } //滑鼠在輪播圖上劃過則停止自動輪播，移出後重啟自動輪播 var oWrap = document.getElementById("wrap"); oWrap.onmouseover = function(){ clearInterval(timer); } oWrap.onmouseout = function(){ timer = setInterval(function(){ move(); },3000) } </script> </body> </html>