JS之輪播圖自動切換效果
阿新 • • 發佈：2017-07-01
poi 自動切換 relative amp index 點擊 mouseover 更新 adding
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>焦點輪播圖</title> 6 <style type="text/css"> 7 *{ margin: 0; padding: 0; text-decoration: none;} 8 body { padding: 20px;} 9 #container { width:600px; height: 400px; border: 3px solid #333; overflow: hidden; position: relative;} 10 #list { width: 4200px; height: 400px; position: absolute; z-index: 1;} 11 #list img { float: left;} 12 #buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;} 13 #buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;} 14 #buttons .on { background: orangered;} 15 .arrow { cursor: pointer; display: none; line-height: 39px; 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,.3); color: #fff;} 16 .arrow:hover { background-color: RGBA(0,0,0,.7);} 17 #container:hover .arrow { display: block;} 18 #prev { left: 20px;} 19 #next { right: 20px;} 20 </style> 21 <script type="text/javascript"> 22 23 window.onload = function () { 24 var container = document.getElementById(‘container‘); 25 var list = document.getElementById(‘list‘); 26 var buttons = document.getElementById(‘buttons‘).getElementsByTagName(‘span‘); 27 var prev = document.getElementById(‘prev‘); 28 var next = document.getElementById(‘next‘); 29 var index = 1; 30 var len = 5; 31 var animated = false; //動畫運行狀態函數，初始狀態為false 32 var interval = 3000; 33 var timer; //聲明定時器 34 35 36 function animate (offset) { //offset為總偏移量 37 if (offset == 0) { 38 return; 39 } 40 animated = true; //動畫運行時候，狀態為true 41 var time = 300; //位移總時間 42 var inteval = 10; //每隔10毫秒移動 43 var speed = offset/(time/inteval); //每次位移量 44 var left = parseInt(list.style.left) + offset; //offset為總偏移量 45 46 var go = function (){ 47 if ( (speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) { 48 list.style.left = parseInt(list.style.left) + speed + ‘px‘; 49 setTimeout(go, inteval); 50 } 51 else { 52 list.style.left = left + ‘px‘; 53 if(left>-200){ 54 list.style.left = -600 * len + ‘px‘; 55 } 56 if(left<(-600 * len)) { 57 list.style.left = ‘-600px‘; 58 } 59 animated = false; //不做位移時候，動畫執行完畢 60 } 61 } 62 go(); 63 } 64 65 function showButton() {//激活小圓點 66 for (var i = 0; i < buttons.length ; i++) { 67 if( buttons[i].className == ‘on‘){ 68 //清除其他的class 69 buttons[i].className = ‘‘; 70 break; //跳出循環 71 } 72 } 73 buttons[index - 1].className = ‘on‘; //當前Li加class 74 } 75 76 function play() { //切換函數 77 timer = setInterval(function () { //設置定時器 78 next.onclick(); 79 80 }, interval); //interval本例子是3000毫秒 81 } 82 function stop() { 83 clearInterval(timer); //清楚定時器 84 } 85 86 next.onclick = function () { 87 if (animated) { 88 return; 89 } 90 if (index == 5) { 91 index = 1; //到最右邊（例子圖片總數為5），跳到1 92 } 93 else { 94 index += 1;//到最右邊，跳到1 95 } 96 animate(-600); 97 showButton(); //調用小圓點函數 98 } 99 prev.onclick = function () { 100 if (animated) { 101 return; 102 } 103 if (index == 1) { 104 index = 5; 105 } 106 else { 107 index -= 1; 108 } 109 animate(600); 110 showButton(); //調用小圓點函數 111 } 112 113 for (var i = 0; i < buttons.length; i++) { 114 buttons[i].onclick = function () { //給每個小圓點加click事件 115 if (animated) { 116 return; 117 } 118 if(this.className == ‘on‘) { //當前class為on，則返回函數，後面不執行了 119 return; 120 } 121 var myIndex = parseInt(this.getAttribute(‘index‘));//index為自定義屬性，用getAttribute獲取到,然後轉換為整數 122 var offset = -600 * (myIndex - index); //新偏移值-舊偏移值，算出每次點擊小圓點的偏移量 123 124 animate(offset); //傳值進去 125 index = myIndex; //更新目前的index值 126 showButton(); //調用小圓點函數 127 } 128 } 129 130 container.onmouseover = stop; 131 container.onmouseout = play; //鼠標移除，就執行定時器 132 133 play();//默認狀態是自動播放 134 135 } 136 </script> 137 </head> 138 <body> 139 140 <div id="container"> 141 <div id="list" style="left: -600px;"> 142 <img src="5.jpg" alt="1"/> 143 <img src="1.jpg" alt="1"/> 144 <img src="2.jpg" alt="2"/> 145 <img src="3.jpg" alt="3"/> 146 <img src="4.jpg" alt="4"/> 147 <img src="5.jpg" alt="5"/> 148 <img src="1.jpg" alt="5"/> 149 </div> 150 <div id="buttons"> 151 <span index="1" class="on"></span> 152 <span index="2"></span> 153 <span index="3"></span> 154 <span index="4"></span> 155 <span index="5"></span> 156 </div> 157 <a href="javascript:;" id="prev" class="arrow"><</a> 158 <a href="javascript:;" id="next" class="arrow">></a> 159 </div> 160 161 </body> 162 </html>
JS之輪播圖自動切換效果