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"><</div>
28 <div class="btn btn2">></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 }