JS -- 轮播图

  1 <!DOCTYPE html>
  2 <html lang="cn">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>轮播图</title>
  6     <style type="text/css">
  7         *{
  8             margin: 0;
  9             padding: 0;
 10             list-style: none;
 11         }
 12         #banner{
 13             width: 300px;
 14             height: 600px;
 15             margin: 0 auto;
 16         }
 17         #play{
 18             width: 300px;
 19             height: 600px;
 20             z-index: 999;
 21             position: relative;
 22         }
 23         #imglist img{
 24             width: 400px;
 25             height: 600px;
 26         }
 27         #iconlist{
 28             position: absolute;
 29             right: 0px;
 30             bottom: 10px;
 31         }
 32         #iconlist li{
 33             float: left;
 34             width: 30px;
 35             height: 30px;
 36             margin-right: 15px;
 37             background-color: rgba(0,0,0,0.5);
 38             text-align: center;
 39             line-height: 30px;
 40             border-radius: 50%;
 41             color: #fff;
 42             cursor: pointer;
 43         }
 44     </style>
 45 </head>
 46 <body>
 47     <div id="banner">
 48         <div id="play">
 49             <div id="imglist">
 50                 <a href="#"><img src="./imgs/1.jpg" style="display:block;"></a>
 51                 <a href="#"><img src="./imgs/2.jpg" style="display:none;"></a>
 52                 <a href="#"><img src="./imgs/3.jpg" style="display:none;"></a>
 53                 <a href="#"><img src="./imgs/4.jpg" style="display:none;"></a>
 54                 <a href="#"><img src="./imgs/5.jpg" style="display:none;"></a>
 55             </div>
 56             <div id="iconlist">
 57                 <ul>
 58                     <li style="background-color: #f00;">1</li>
 59                     <li>2</li>
 60                     <li>3</li>
 61                     <li>4</li>
 62                     <li>5</li>
 63                 </ul>
 64             </div>
 65         </div>
 66     </div>
 67 
 68     <script>
 69 
 70         // 获取
 71         var play = document.getElementById('play');
 72         var imglist = play.getElementsByTagName('img');
 73         var iconlist = play.getElementsByTagName('li');
 74 
 75         // 设置循环
 76         var m = 1;
 77         function run() {
 78             if (m > 4) {
 79                 m = 0;
 80             }
 81             img(m);
 82             icon(m);
 83             m++;
 84         }
 85 
 86         // 1秒
 87         var timer = setInterval(run, 1000);
 88 
 89         // 图片的
 90         function img(m) {
 91             for (var i = 0; i < imglist.length; i++) {
 92                 imglist[i].style.display = 'none';
 93             }
 94             imglist[m].style.display = 'block';
 95         }
 96 
 97         // 数字的
 98         function icon(m) {
 99             for (var i = 0; i < iconlist.length; i++) {
100                 iconlist[i].style.backgroundColor = 'rgba(0,0,0,0.5)';
101             }
102             iconlist[m].style.backgroundColor = '#f00';
103         }
104 
105         // 鼠标移入时清除定时
106         play.onmouseover = function () {
107             clearInterval(timer);
108         }
109 
110         鼠标移走时调用定时，并且是执行当前页面的下一页
111         play.onmouseout = function () {
112             timer = setInterval(run, 3000);
113         }
114 
115         // 循环绑定事件
116         for (var i = 0; i < iconlist.length; i++) {
117             (function(i){
118                 iconlist[i].onmouseover = function() {
119                     img(i);
120                     icon(i);
121                     m = i + 1;
122                 }
123             })(i);
124         }
125 
126     </script>
127 </body>
128 </html>
这是一个用js做的一个带有对应数字图片的轮播图，img的 src  自己导入一下即可， 刚学js不久，自己做的一些小特效。有什么不足，望大神指点 。 
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　-----  想成为大牛的菜鸟
猜你喜欢
