JS之轮播图自动切换效果
Posted 追寻-我心
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS之轮播图自动切换效果相关的知识，希望对你有一定的参考价值。
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之轮播图自动切换效果的主要内容，如果未能解决你的问题，请参考以下文章