首页 > 代码库 > jq实现无缝轮播

jq实现无缝轮播

2024-08-16 16:09:59   223人阅读

2016-10-14 jq实现无缝轮播

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>jq实现轮播图</title>
  6 <style>
  7     *{
  8         margin: 0 auto;
  9         padding: 0;
 10         text-decoration: none;
 11         list-style: none;
 12         }
 13     #box{
 14         position: relative;
 15         width: 478px;
 16         height: 268px;
 17         margin-top: 50px;
 18         overflow: hidden;
 19         }
 20     #list{
 21         position: absolute;
 22         width: 2868px;
 23         height: 268px;
 24         z-index: -1;
 25         }
 26     #list li{
 27         float: left;
 28         }
 29     #nums{
 30         position: absolute;
 31         left: 205px;
 32         bottom: 20px;
 33         width: 120px;
 34         height: 10px;
 35         }
 36     #nums li{
 37         float: left;
 38         width: 10px;
 39         height: 10px;
 40         margin-right: 10px;
 41         border: 1px solid #ccc;
 42         border-radius: 50%;
 43         background: #333;
 44         cursor: pointer;
 45         }
 46     #nums li.on{
 47         background: #0080FF;
 48         }
 49     #box .btn{
 50         position: absolute;
 51         top: 50%;
 52         width: 28px;
 53         height: 62px;
 54         line-height: 62px;
 55         text-align: center;
 56         color: #fff;
 57         font-size: 36px;
 58         font-weight: 400;
 59         background: rgba(0,0,0,.2);
 60         cursor: pointer;
 61         display: none;
 62         }
 63     #box .prev{
 64         left: 2px;
 65         }
 66     #box .next{
 67         right: 2px;
 68         }
 69         
 70      .btn:hover{
 71             background-color: RGBA(0, 0, 0, .7);
 72         }
 73     #box:hover .btn{
 74         display: block;
 75         }
 76 </style>    
 77 
 78 </head>
 79 
 80 <body>
 81     <div id = "box">
 82         <ul id = "list">
 83             <li><img src = "images/img1.jpg"></li>
 84             <li><img src = "images/img2.jpg"></li>
 85             <li><img src = "images/img3.jpg"></li>
 86             <li><img src = "images/img4.jpg"></li>
 87             <li><img src = "images/img5.jpg"></li>
 88         </ul>
 89         <ul id = "nums">
 90             <li class = "on"></li>
 91             <li></li>
 92             <li></li>
 93             <li></li>
 94             <li></li>
 95         </ul>
 96             <a href = "javascript:;" class = "btn prev" >&lt;</a>
 97             <a href = "javascript:;" class = "btn next">&gt;</a>
 98     </div>
 99 <script src = "jquery.js"></script>   
100 <script type="text/javascript">
101     $(function(){
102         var clone = $("#list li").first().clone();//复制第一张图片
103         $(‘#list‘).append(clone);//将复制的图片放置在图片最后
104         
105         var size = $(‘#list li‘).size();
106         var i = 0;
107         
108         //鼠标点击圆点
109         $(‘#nums li‘).mouseover(function(){
110             var index = $(this).index();
111             i = index;
112             $(‘#list‘).stop().animate({left: i*-478},500);
113             $(this).addClass(‘on‘).siblings().removeClass(‘on‘);
114             })
115              
116         //向左轮播
117         $(‘.prev‘).click(function(){
118             i--;
119             if(i == -1){
120                 $(‘#list‘).css({left: -(size -1)*478});
121                 i = size -2;
122                 }
123             $(‘#list‘).stop().animate({left: -i*478},500);
124             $(‘#nums li‘).eq(i).addClass(‘on‘).siblings().removeClass(‘on‘);
125                 
126             });
127         
128         //向右轮播
129         $(‘.next‘).click(function(){
130             move();
131             });
132         function move(){
133             i++;
134             if(i == size){
135                 $(‘#list‘).css({left: 0});
136                 i = 1;
137                 }
138             $(‘#list‘).stop().animate({left: -i*478});
139             if(i == size - 1){
140                 $(‘#nums li‘).eq(0).addClass(‘on‘).siblings().removeClass(‘on‘);
141                 }else{
142                     $(‘#nums li‘).eq(i).addClass(‘on‘).siblings().removeClass(‘on‘);
143                     }
144             }    
145         //定时器
146         var t = setInterval(function(){
147             move();
148             },1500);
149         
150         //鼠标滑过停止自动播放
151         $(‘#box‘).hover(function(){
152             clearInterval(t)
153             },
154              function(){
155                         t=setInterval(function () {
156                             moveR();
157                         },1500)
158              });
159     })
160 </script>
161 </body>
162 </html>

 

jq实现无缝轮播


联系
我们