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 }