无缝首尾相连滚动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="http://luxury.bjhoutai.com/js/jquery-1.8.2.min.js"></script>
</head>
<style>
*{padding:0px; margin:0px; border:0px;}
li{list-style:none;}
#mrt_scroll{ width:500px; height:70px; overflow:hidden; position:relative}
#mrt_scroll_move{ width:80000px;position: absolute;left:0px;}
#mrt_scroll ul { float:left}
#mrt_scroll ul li{ width:120px; margin:0px 5px; float:left}
</style>
<body>
<div id='mrt_scroll'>
<div id='mrt_scroll_move'>
<ul id='mrt_scroll1'>
<li> <img src='http://img.zjhm.com/newluxury/images/jdt0101_660×372.jpg' width='120' height='70'></li>
<li> <img src='http://img.zjhm.com/newluxury/images/jdt0102_660×372.jpg' width='120' height='70'></li>
<li> <img src='http://img.zjhm.com/newluxury/images/jdt0103_660×372.jpg' width='120' height='70'></li>
<li> <img src='http://img.zjhm.com/newluxury/images/jdt0104_660×372.jpg' width='120' height='70'></li>
</ul>
<ul id='mrt_scroll2'></ul>
</div>
</div>
<script>
$("#mrt_scroll2").html($("#mrt_scroll1").html());
setInterval(function(){
$("#mrt_scroll_move").css({left:'-=1px'});
if(-parseInt($("#mrt_scroll_move").css("left")) == parseInt($("#mrt_scroll1").css("width")) ){
$("#mrt_scroll_move").css("left","0px");
}
},20);
</script>
</body>
</html>
/*/*/*/*/*/*//*/*/*/*/*/*//*/*/*/*/*/*//*/*/*/*/*/*//*/*/*/*/*/*//*/*/*/*/*/*//*/*/*/*/*/*/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="http://luxury.bjhoutai.com/js/jquery-1.8.2.min.js"></script>
</head>
<style>
*{padding:0px; margin:0px; border:0px;}
li{list-style:none;}
.all_wai{ width:540px; margin:10px auto; position:relative}
#mrt_scroll{ width:520px; margin:0px auto; height:70px; overflow:hidden; position:relative}
#mrt_scroll_move{ width:80000px;position: absolute;left:0px;}
#mrt_scroll ul { float:left}
#mrt_scroll ul li{ width:120px; margin:0px 5px; float:left}
#left{position: absolute; left:0px; top:40%}
#right{position: absolute; right:0px; top:40%}
</style>
<body>
<div class="all_wai">
<div id='mrt_scroll'>
<div id='mrt_scroll_move'>
<ul id='mrt_scroll1'>
<li> <img src='http://img.zjhm.com/newluxury/images/jdt0101_660×372.jpg' width='120' height='70'></li>
<li> <img src='http://img.zjhm.com/newluxury/images/jdt0102_660×372.jpg' width='120' height='70'></li>
<li> <img src='http://img.zjhm.com/newluxury/images/jdt0103_660×372.jpg' width='120' height='70'></li>
<li> <img src='http://img.zjhm.com/newluxury/images/jdt0104_660×372.jpg' width='120' height='70'></li>
</ul>
<ul id='mrt_scroll2'></ul>
</div>
</div>
<a id='left'><</a>
<a id='right'>></a>
</div>
<script>
var timing,time=0;
$("#mrt_scroll2").html($("#mrt_scroll1").html());
setInterval(function(){
if(-parseInt($("#mrt_scroll_move").css("left"))<=390){
$("#mrt_scroll_move").animate({left:'-=130px'},500); }
else{
$("#mrt_scroll_move").css({left:'0px'});
$("#mrt_scroll_move").animate({left:'-=130px'},500);
}
if(-parseInt($("#mrt_scroll_move").css("left")) >= parseInt($("#mrt_scroll1").css("width")) ){
$("#mrt_scroll_move").css("left","0px");
}
},5000);
$("#left").click(function(){
if(time == 0){
time = 1;
timing = setTimeout("test()",500);
if(parseInt($("#mrt_scroll_move").css('left'))==-390){
$("#mrt_scroll_move").css('left','0px');
}
if(parseInt($("#mrt_scroll_move").css('left')) <= 0 && parseInt($("#mrt_scroll_move").css('left'))>-390){
$("#mrt_scroll_move").animate({left:'-=130px'},500);
}
}
});
$("#right").click(function(){
if(time == 0){
time = 1;
timing = setTimeout("test()",500);
if(parseInt($("#mrt_scroll_move").css('left')) < 0 && parseInt($("#mrt_scroll_move").css('left'))>=-520){
$("#mrt_scroll_move").animate({left:'+=130px'},500);
}
}
});
function test(){
if(time == 1){
time--;
}
}
</script>
</body>
</html>
