无缝动态轮播图 

 1 <!DOCTYPE html>
 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></title>
 6     <link href="css/demo2.css" rel="stylesheet" />
 7     <script src="js/jquery-1.10.2.min.js"></script>
 8     <script src="js/demo2.js"></script>
 9 </head>
10 <body>
11     <div id="dlunbo">
12         <div id="igs">
13             <div class="ig"><img src="img/1.jpg" /></div>
14             <div class="ig"><img src="img/2.jpg" /></div>
15             <div class="ig"><img src="img/3.jpg" /></div>
16             <div class="ig"><img src="img/4.jpg" /></div>
17             <div class="ig"><img src="img/5.jpg" /></div>
18             <div class="ig"><img src="img/1.jpg" /></div><!--无缝需要再放一个1-->
19         </div>
20         <ul id="tabs">
21             <li class="bg"></li>
22             <li></li>
23             <li></li>
24             <li></li>
25             <li></li>
26         </ul>
27         <div class="btn btn1">&lt;</div>
28         <div class="btn btn2">&gt;</div>
29     </div>
30 </body>
31 </html>
 1 *{
 2     padding:0px;
 3     margin:0px;
 4     font-family:"微软雅黑";
 5     list-style-type:none;
 6 }
 7 #dlunbo{
 8     width:520px;
 9     height:280px;
10     position:absolute;
11     top:50%;
12     margin-top:-140px;
13     left:100px;
14     overflow:hidden;/*超出部分隐藏*/
15 }
16 #tabs{
17     position:absolute;
18     bottom:10px;
19     left:200px;
20 }
21 #tabs li{
22     width:20px;
23     height:20px;
24     border:solid 1px #fff;
25     float:left;
26     margin-right:5px;
27     border-radius:100%;
28     cursor:pointer;
29 }
30 .btn{
31     position:absolute;
32     width:30px;
33     height:50px;
34     background:rgba(0,0,0,0.5);
35     color:#fff;
36     text-align:center;
37     line-height:50px;
38     font-size:30px;
39     top:50%;
40     margin-top:-25px;
41     cursor:pointer;
42     display:none;
43 }
44 .ig{
45     float:left;
46 }
47 #igs{
48     width:3500px;
49     height:280px;
50     position:absolute;
51 }
52 .btn1{
53     left:0px;
54 }
55 .btn2{
56     right:0px;
57 }
58 #tabs .bg{
59     background-color:#ff0000;
60 }
 1 /// <reference path="jquery-1.10.2.min.js" />
 2 var i = 0;
 3 var timer;
 4 $(function () {
 5     $("#dlunbo").hover(function () {
 6         $(".btn").show();
 7     }, function () {
 8         $(".btn").hide();
 9     });
10     timer = setInterval(function () {
11         i++;
12         Move();
13     }, 4000);
14     $("#tabs li").hover(function () {
15         clearInterval(timer);
16         i = $(this).index();
17         Move();
18     }, function () {
19         StartLunbo();
20     });
21     $(".btn1").click(function () {
22         clearInterval(timer);
23         i--;
24         if (i == -1) {
25             $("#igs").css("left", -520 * 5);//无缝连接需要css过渡,实际看不出来
26             i = 4;
27         }
28         Move();
29         StartLunbo();
30     });
31     $(".btn2").click(function () {
32         clearInterval(timer);
33         i++;
34         Move();
35         StartLunbo();
36     });
37 });
38 
39 function Move()
40 {
41     if (i < 5) {
42         $("#igs").stop(true,true).animate({ "left": -520 * i },200);
43     }
44     else {
45         $("#igs").stop(true, true).animate({ "left": -520 * i }, 500, function () {
46             $("#igs").css("left", "0px");
47         });
48         i = 0;
49     }
50     $("#tabs li").eq(i).addClass("bg").siblings().removeClass("bg");
51 }
52 function StartLunbo()
53 {
54     timer = setInterval(function () {
55         i++;
56         Move();
57     }, 4000);
58 }

 

posted @ 2017-07-25 16:31  *不忘初心*  阅读(236)  评论(0)  编辑  收藏  举报