首尾相连幻灯
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<script type="text/javascript" src="http://luxury.bjhoutai.com/js/jquery-1.8.2.min.js"></script>
</head>
<style>
*{border:0px; margin:0px; padding:0px;}
li{list-style:none}
.mrt_move_body{ height:350px; width:400px; overflow:hidden;}
#mrt{ height:350px; width:400px; overflow:hidden; position:relative}
#mrt_w{ width:3200px; height:350px;}
.mrt_move_body ul { float:left;}
.mrt_move_body ul li{ width:400px; background:#CCCCCC; float:left; height:350px;}
#mrt_left,#mrt_right{ display:block; width:20px; height:30px; background:#999999; position:absolute;top:45%;}
#mrt_left{ left:10px;}#mrt_right{ right:10px;}
</style>
<body>
<div id="mrt">
<div class="mrt_move_body">
<div id="mrt_w">
<ul id="mrt_c_1">
<li>part1</li>
<li>part2</li>
<li>part3</li>
<li>part4</li>
</ul>
<ul id="mrt_c_2"></ul>
</div>
<span id="mrt_left"></span>
<span id="mrt_right"></span>
</div>
</div>
<script>
$("#mrt_c_2").html($("#mrt_c_1").html());
$("#mrt_left").click(function(){
if($(".mrt_move_body").scrollLeft() >= 1600){
$(".mrt_move_body").scrollLeft(0);
$(".mrt_move_body").animate({scrollLeft:'+=400'},500);
}else{
$(".mrt_move_body").animate({scrollLeft:'+=400'},500);
}
});
$("#mrt_right").click(function(){
if($(".mrt_move_body").scrollLeft() == 0){
$(".mrt_move_body").scrollLeft(1600);
$(".mrt_move_body").animate({scrollLeft:'-=400'},500);
}else{
$(".mrt_move_body").animate({scrollLeft:'-=400'},500);
}
});
</script>
</body>
</html>
