关于实现图片轮转的方法

1.前台HTML代码 
设置图片所在的标签样式注意事项
1.设置外层DIV宽度为无限大
2.设置DIV的外层为显示宽度，超出则隐藏。这样所有的图片才会在一行显示 
由于写的有点乱 Css和div未分开 不建议
<div style="width: 500px;overflow: hidden;position: relative">
    <div id="imgContain" style="width: 9999px"></div>
    <div class="nrrow pre"><input type="button" onclick="Pre()" value="上一个"/></div>
    <div class="nrrow next"><input type="button" onclick="Next()" value="下一个"/></div>
</div>


js代码

--上一个

这个不太好理解，就是在以动画的形式移动需要的距离，最后瞬间回到起始位置

function Pre(){
var ul=$("ul");
var len=$("ul li:eq(0)").width()*-1;
ul.animate({marginLeft:len*3},1000,function(){
var html=ul.append($("ul li:lt(3)"));
ul.css("margin-left","0px");
});
}

--下一个

原理就是 把前几张图片附加到最后，然后把UL朝做瞬间移动每次需要移动的距离，然后以动画的形式移动到起始位置

这样显示的效果就是需要的效果
function Next(){
var ul=$("ul");
var len=$("ul li:eq(0)").width()*-1;
var html=ul.prepend($("ul li:gt(14)"));
ul.css("margin-left",len*3);
ul.animate({marginLeft:"0px"},1000);
}

css 
.border{
border: 2px solid green;
}
.line{
width: 100%;
border: 1px solid green;
content: "000";
}
#imgContain ul{
list-style: none;
clear: both;
}
#imgContain ul li{
display: block;
float: left;
width: 175px;
height: 120px;
padding: 5px;
text-align: center;
position: relative;
margin: 0px;
}
#imgContain ul li img{
width: 125px;
height: 80px;
position: absolute;
top: 20px;
left: 20px;
}
p{
margin: 0px;
}
.detail{
position: absolute;
left: 65px;
bottom: 0px;
}
.nrrow{
position: absolute;
top: 75px;
opacity: 0.5;
}
.pre{
left: 25px;

}
.next{
right: -10px;
}

原理比较简单 具体 不多过多累述 仅供参考 如果问题可一块探讨