jQuery实现的一个图片左右循环滚动的例子，
html代码如下：
<div class="lrScroll">
<ul>
<li>我是第1张图片</li>
<li>我是第2张图片</li>
<li>我是第3张图片</li>
<li>我是第4张图片</li>
<li>我是第5张图片</li>
<li>我是第6张图片</li>
<li>我是第7张图片</li>
<li>我是第N张图片</li>
</ul>
</div>
<div class="button">
<input name="a" type="button" onClick="lxfLast()" value="上一个" />
<input name="a" type="button" onClick="lxfNext()" value="下一个" />
</div>
<div class="button">当前显示的是第 <i>1</i> 张图片</div>
css代码如下：
<style type="text/css">
* {
margin:0;
padding:0;
font-size:12px;
}
.lrScroll {
width:400px;
margin-left:auto;
margin-right:auto;
margin-top: 20px;
overflow: hidden;
position: relative;
height: 300px;
border: 1px solid #CCC;
}
.lrScroll ul {
list-style:none;
padding:10px;
width:400px;
height:300px;
}
.button {
margin:20px auto;
overflow:hidden;
width:400px;
text-align:center;
}
.button i {
font-style:normal;
color:#CC0000;
}
.button input {
cursor:pointer;
padding:2px 10px;
}
.lrScroll ul li {
height: 300px;
width: 400px;
text-align: center;
line-height: 300px;
font-size: 40px;
font-weight: bold;
position:absolute;
color:#0000FF;
}
</style>
jQuery代码如下：
<script type="text/javascript">
$(function(){
var i=0;
var li=$(".lxfscroll li");
var n=li.length-1;
var speed=300;
li.not(":first").css({left:"400px"});
li.eq(n).css({left:"-400px"});
lxfNext=function(){
if(!li.is(":animated")){
if(i>=n){i=0;li.eq(n).animate({left:"-400px"},speed);
li.eq(i).animate({left:"0px"},speed);
}else{
i++;
li.eq(i-1).animate({left:"-400px"},speed);li.eq(i).animate({left:"0px"},speed);
};
li.not("eq(i)").css({left:"400px"});
$("i").text(i+1);
}else{};
};
lxfLast=function(){
if(!li.is(":animated")){
if(i<=0){
i=n;li.eq(0).animate({left:"400px"},speed);li.eq(n).animate({left:"0px"},speed);
}else{
i--;li.eq(i+1).animate({left:"400px"},speed);li.eq(i).animate({left:"0px"},speed);
}
li.not("eq(i)").css({left:"-400px"});
$("i").text(i+1);
}
}
})
</script>
简单的预览效果
