scrollLeft轮播无限播怎么写?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<style type="text/css">
.slide{
width:600px;
height:280px;
position: relative;
}
.slide .box{position:relative;width:600px;height:280px;overflow: hidden;}
.slide .list{width:9999px;}
.slide .list li{float:left;width:600px;position: relative;}
</style>
<body>
<div id="slide" class="slide">
<div class="box">
<ul class="list clr">
<li >
<a href="#1">
<img src="images/slide.jpg" width="600" height="280"></a>
</li>
<li >
<a href="#1">
<img src="images/slide.jpg" width="600" height="280"></a>
</li>
<li >
<a href="#1">
<img src="images/slide.jpg" width="600" height="280"></a>
</li>
<li >
<a href="#1">
<img src="images/slide.jpg" width="600" height="280"></a>
</li>
<li >
<a href="#1">
<img src="images/slide.jpg" width="600" height="280"></a>
</li>
</ul>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
var n=-1;
var sw;
auto();
setInterval(auto, 5000);
function auto(){
n = n >= 4 ? 0 : ++n;
sw=n*600;
$("#slide .box").animate({"scrollLeft":(sw)});
}
});
</script>
<li >
<a href="#1">
<img src="images/slide.jpg" width="600" height="280"></a>
</li>
<li >
<a href="#1">
<img src="images/slide.jpg" width="600" height="280"></a>
</li>
<li >
<a href="#1">
<img src="images/slide.jpg" width="600" height="280"></a>
</li>
<li >
<a href="#1">
<img src="images/slide.jpg" width="600" height="280"></a>
</li>
<li >
<a href="#1">
<img src="images/slide.jpg" width="600" height="280"></a>
</li>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js
"></script>
<style type="text/css">
.slide{
width:600px;
height:280px;
position: relative;
border:1px solid;
overflow: hidden;
}
ul,li{
padding: 0;
margin: 0;
list-style: none;
}
.slide .box{position:relative;margin-left: -600px;width:1800px;height:280px;overflow: hidden;}
.slide .list{width:9999px;}
.slide .list li{float:left;width:600px;height:280px;position: relative;background: #84C1FF}
</style>
<script type="text/javascript">
$(document).ready(function(){
var index = 0;
var datas = [1,2,3,4,5,6,7,8];
var n=-1;
var sw;
var lis = $("#slide li");
$("#slide .crt").html(datas[0]);
$("#slide .nxt").html(datas[1]);
auto();
function auto(){
$("#slide .box").animate({marginLeft:-1200},1000,function(){
index++;
if(index ==datas.length){
index = 0;
}
$("#slide .nxt").after($("#slide .pre"));
$("#slide .box").css("marginLeft",-600)
var lis = $("#slide li");
lis.eq(0).attr("class","pre").html("");
lis.eq(1).attr("class","crt");
lis.eq(2).attr("class","nxt").html(index == datas.length-1?datas[0]:datas[index + 1]);;
setTimeout(auto, 1000);
});
}
});
</script>
</head>
<body>
<div id="slide" class="slide">
<div class="box">
<ul class="list clr">
<li class="pre">
</li>
<li class="crt">
</li>
<li class="nxt">
</li>
</ul>
</div>
</div>
</body>
</html>
