标签：
1.利用scrollLeft方法
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus®"> 6 <meta name="Author" content=""> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 <title>无间隙滚动</title> 10 <style type="text/css"> 11 *{margin:0;padding:0;} 12 .main{width:1336px;height:254px;background:rgba(0,0,0,0.5);margin:300px auto 0;overflow:hidden} 13 .main .demo{width:9999px;height:254px;overflow:hidden} 14 .demo .demo1,.demo2{width:1670px;height:254px;float:left;} 15 .demo ul{list-style:none;} 16 .demo ul li{border:2px solid white;margin:5px;float:left;height:240px;} 17 .demo ul li img{width:320px;height:240px;} 18 </style> 19 </head> 20 <body> 21 <!--利用了scrollLeft方法，向左移动div，前提是需要移动的div要比自己的盒子div大，也要比自己的子元素之和大，不然子元素放不下--> 22 <div class="main"> 23 <div class="demo"> 24 <div class="demo1"> 25 <ul> 26 <li><a href="#" target="_blank"><img src="images/1.jpg"/></a></li> 27 <li><a href="#" target="_blank"><img src="images/2.jpg"/></a></li> 28 <li><a href="#" target="_blank"><img src="images/3.jpg"/></a></li> 29 <li><a href="#" target="_blank"><img src="images/4.jpg"/></a></li> 30 <li><a href="#" target="_blank"><img src="images/5.jpg"/></a></li> 31 </ul> 32 </div> 33 <div class="demo2"></div> 34 </div> 35 36 </div> 37 <script type="text/javascript" src="js/jquery-1.11.3.js"></script> 38 <script type="text/javascript"> 39 $(".demo2").html($(".demo1").html()); 40 function scroll(){ 41 if($(".main").scrollLeft()>=$(".demo1").width()) 42 { 43 $(".main").scrollLeft(0); 44 } 45 else 46 { 47 $(".main").scrollLeft($(".main").scrollLeft()+1); 48 } 49 } 50 var timer=setInterval("scroll()",5); 51 $(".main .demo li").hover(function(){ 52 clearInterval(timer); 53 }, 54 function(){ 55 timer=setInterval("scroll()",5); 56 } 57 ); 58 </script> 59 </body> 60 </html>
2.利用animate方法
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>无间隙滚动</title> <style type="text/css"> *{margin:0;padding:0;} .main{width:1336px;height:254px;background:rgba(0,0,0,0.5);margin:300px auto 0;overflow:hidden;position:relative;} .main .demo{width:9999px;height:254px;overflow:hidden;position:absolute;left:0px;} .demo .demo1,.demo2{width:1670px;height:254px;float:left;} .demo ul{list-style:none;} .demo ul li{border:2px solid white;margin:5px;float:left;height:240px;} .demo ul li img{width:320px;height:240px;} </style> </head> <body> <!--利用了animate方法，向左移动div，前提是需要移动的div要比自己的盒子div大，也要比自己的子元素之和大，不然子元素放不下--> <div class="main"> <div class="demo"> <div class="demo1"> <ul> <li><a href="#" target="_blank"><img src="images/1.jpg"/></a></li> <li><a href="#" target="_blank"><img src="images/2.jpg"/></a></li> <li><a href="#" target="_blank"><img src="images/3.jpg"/></a></li> <li><a href="#" target="_blank"><img src="images/4.jpg"/></a></li> <li><a href="#" target="_blank"><img src="images/5.jpg"/></a></li> </ul> </div> <div class="demo2"></div> </div> </div> <script type="text/javascript" src="js/jquery-1.11.3.js"></script> <script type="text/javascript"> $(".demo2").html($(".demo1").html()); var jl=0; var count=1; function scroll(){ if(jl>=$(".demo1").width()) { jl=0; count=0; } else { $(".demo").animate({"left":-1*count+"px"},0); jl++; count++; } } var timer=setInterval("scroll()",10); $(".main .demo ul li").hover(function(){ clearInterval(timer); }, function(){ timer=setInterval("scroll()",10); } ); </script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/chengxuyuandadao/p/4652094.html
