焦點輪播圖（7）原生JS實現焦點輪播圖--完整程式碼
阿新 • • 發佈：2019-01-23
輪播圖終於更完了，附上完整程式碼：
<html> <head> <meta charset="utf-8" /> <title>焦點輪播圖</title> <style type="text/css"> *{ margin: 0; padding: 0; text-decoration: none; } body{ padding:20px; } #container{ width:600px; height:392px; border:3px solid #333; overflow: hidden; position:relative;margin:0 auto; } #list{ width: 4200px; height: 400px; position: absolute; z-index: 1; } #list img{ float:left; } #buttons{ position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px; } #buttons span{ cursor: pointer; float: left; border:1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px; } #buttons .on{ background: orange; } .arrow{ cursor: pointer; display: none; line-height: 30px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px; position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.5); color:white; } .arrow:hover{ background-color: RGBA(0,0,0,.7); } #container:hover .arrow{ display:block; } #prev{ left:20px; } #next{ right: 20px; } </style> <script type="text/javascript"> window.onload = function (){ var container = document.getElementById('container'); var list = document.getElementById('list'); var buttons = document.getElementById('buttons').getElementsByTagName('span'); var prev = document.getElementById('prev'); var next = document.getElementById('next'); var index = 1;//顯示第幾個小圓點 var changed = false;//切換狀態值無切換 var timer; function showButton(){//點亮小圓點 for(var i = 0;i < buttons.length; i++){ if (buttons[i].className == 'on'){ buttons[i].className = ''; break; } } buttons[index - 1].className = 'on';//改變classname改變小圓點的樣式 } function change(offset){//切換函式 changed = true; var newleft = parseInt(list.style.left) + offset; var time = 300;//位移總時間（ms） var interval = 10;//位移間隔時間 var speed = offset/(time/interval);//每次的位移量 總偏移/次數 function go(){ if((speed < 0 && parseInt(list.style.left) > newleft)||(speed > 0 && parseInt(list.style.left) < newleft)){ list.style.left = parseInt(list.style.left) + speed + 'px'; setTimeout(go,interval);//每隔interval執行一次go } else{ changed = false; list.style.left = newleft + 'px'; if(newleft > -600){//歸位 list.style.left = -3000 + 'px'; } if(newleft < -3000){ list.style.left = -600 + 'px'; } } } go(); } function play(){//自動切換函式 timer = setInterval(function(){ next.onclick(); },3000); } function stop(){//自動切換停止函式 clearInterval(timer); } next.onclick = function() {//右箭頭點選事件 if(index == 5){ index = 1; } else{ index += 1; } showButton(); if(!changed){ change(-600); } } prev.onclick = function() {//左箭頭點選事件 if(index == 1){ index = 5; } else{ index -= 1; } showButton(); if(!changed){ change(600); } } //為小圓點新增點選事件 for(var i =0; i <buttons.length; i++){ buttons[i].onclick = function(){ //判斷如果點選對應以開啟圖片，退出函式 if(this.classname == 'on'){ return; } //獲取自定義或動態屬性 var myindex = parseInt(this.getAttribute('index')); var offset = -600 * (myindex - index); index = myindex; showButton(); if(!changed){ change(offset); } } } container.onmouseover = stop;//滑鼠移動到容器內停止自動切換 container.onmouseout = play;//滑鼠在容器外執行自動切換 play(); } </script> </head> <body> <div id = "container"> <div id = "list" style = "left:-600px;"> <img src="img/5.jpg" alt="" /> <img src="img/1.jpg" alt="" /> <img src="img/2.jpg" alt="" /> <img src="img/3.jpg" alt="" /> <img src="img/4.jpg" alt="" /> <img src="img/5.jpg" alt="" /> <img src="img/1.jpg" alt="" /> </div> <div id = "buttons"> <span index="1" class="on"></span> <span index="2"></span> <span index="3"></span> <span index="4"></span> <span index="5"></span> </div> <a href="javascript:;" class="arrow" id="prev"><</a> <a href="javascript:;" class="arrow" id="next">></a> </div> </body> </html>