今天给大家带来的是我自己做的一个轮播图效果，让我们一起来学习一下吧。
这是我的页面所有代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>轮播图</title> 6 <style type="text/css"> 7 *{padding: 0;margin: 0;} 8 #ban_box{width: 1000px;height: 400px;margin: 5% auto;position: relative;overflow: hidden;} 9 #banner{position: absolute;z-index: 1;width:4000px;height: 400px;} 10 #banner img{width: 1000px;height: 400px;float: left;} 11 #but {position: absolute;left: 450px;bottom: 20px;z-index: 99;height: 20px;width: 110px;} 12 #but span {float: left;margin-right:25px;width: 20px;height: 20px;border-radius: 50%;background: #ddd;cursor: pointer;} 13 #but span:last-child{margin: 0;} 14 #but .on{background: #C9251D;} 15 .arrow {position: absolute;top: 180px;z-index: 2;text-decoration: none;font-size: 50px;font-weight: bold;color: #000;cursor: pointer;display: none;} 16 #prev{left: 20px;} 17 #next{right: 20px;} 18 #ban_box:hover .arrow{display: block;} 19 </style> 20 </head> 21 <body> 22 <div id="ban_box"> 23 <div id="banner" style="left:-1000px;"> 24 <img src="img/7.jpg"/> 25 <img src="img/11.jpg"/> 26 <img src="img/383708577581202919.jpg"/> 27 <img src="img/7.jpg"/> 28 </div> 29 <div id="but"> 30 <span value="1" class="on"></span> 31 <span value="2"></span> 32 <span value="3"></span> 33 </div> 34 <a href="javascript:;" id="prev" class="arrow"><</a> 35 <a href="javascript:;" id="next" class="arrow">></a> 36 </div> 37 <script type="text/javascript" src="js/fz.js" ></script> 38 <script type="text/javascript"> 39 var box = $("ban_box"); 40 var banner = $("banner"); 41 var prev = $("prev"); 42 var next = $("next"); 43 var but = $('but').getElementsByTagName('span'); 44 var timer; 45 var value=1; 46 function animation(lenghts){ 47 var left = parseInt(banner.style.left) + lenghts; 48 banner.style.left = left + 'px'; 49 banner.style.transition = ".5s"; 50 //无限滚动判断 51 if (left > -1000) { 52 banner.style.left = -3000 + 'px'; 53 } 54 if (left < -3000) { 55 banner.style.left = -1000 + 'px'; 56 } 57 } 58 function butShow() { 59 //将之前的小圆点的样式清除 60 for (var i = 0; i < but.length; i++) { 61 if (but[i].className == "on") { 62 but[i].className = ""; 63 } 64 } 65 //数组从0开始，故index需要-1 66 but[value - 1].className = "on"; 67 } 68 //上一页 69 prev.onclick = function() { 70 value -= 1; 71 if (value < 1) { 72 value = 3; 73 } 74 butShow(); 75 animation(1000); 76 } 77 //下一页 78 next.onclick = function() { 79 value += 1; 80 if (value > 3){ 81 value = 1; 82 } 83 butShow(); 84 animation(-1000); 85 } 86 for (var i = 0; i < but.length; i++) { 87 but[i].onclick = function(){ 88 console.log(i); 89 var click = parseInt(this.getAttribute('value')); 90 var lenghts = 1000 * (value - click); 91 animation(lenghts); 92 value = click; 93 butShow(); 94 } 95 } 96 //定时器 97 function play() { 98 timer = setInterval(function () { 99 next.onclick(); 100 }, 1000) 101 } 102 play(); 103 //鼠标悬浮停止 104 function stop() { 105 clearInterval(timer); 106 } 107 box.onmouseover = stop; //鼠标移到目标上让它停止 108 box.onmouseout = play; //鼠标移开时让它播放 109 </script> 110 </body> 111 </html>
这其中有我自己封装的一些东西，需要引进去，或者把其中需要找的ID用dom找出来就可以了哦
这是我的效果图，大家可以找一些漂亮的图片哦，效果一定会很漂亮哦:
大家如果有什么问题可以在下面问，或者我的代码有什么bug也可以帮我提出，有更好的办法也可以分享给我哦。