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>
时间： 2024-11-20 21:34:12