今天给大家带来的是我自己做的一个轮播图效果，让我们一起来学习一下吧。

这是我的页面所有代码：

  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">&lt;</a>
 35                <a href="javascript:;" id="next" class="arrow">&gt;</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也可以帮我提出，有更好的办法也可以分享给我哦。

 

版权声明：本文为zxnn原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/zxnn/p/8358003.html