效果图：
$(function(){
$("#roll-img2").html($("#roll-img").html());
function rollPlay(){
if($(".ro-main").scrollLeft() > $(".roll-img").width())
{
$(".ro-main").scrollLeft(0);
}
else
{
$(".ro-main").scrollLeft($(".ro-main").scrollLeft()+1);
}
}
var roll=setInterval(rollPlay,40);
$(".ro-main").hover(function(){clearInterval(roll);},function(){roll=setInterval(rollPlay,40);});
$(".roll-btn span").bind("click",rollBtnClick);
function rollBtnClick(){
if($(this).hasClass("roll-prev")){
$(".ro-main").scrollLeft($(".ro-main").scrollLeft()+200);
}else{
if($(".ro-main").scrollLeft() <= 200)
{
$(".ro-main").scrollLeft($(".roll-img").width()-200);
}
else{
$(".ro-main").scrollLeft($(".ro-main").scrollLeft()-200);
}
}
}
})
</script>
<div class="ro-main">
<div class="roll">
<ul id="roll-img" class="roll-img">
<li><img src="data:images/img01.jpg"><span><a href="">产看详情</a><b>谁谁谁水水水水</b></span></li>
<li><img src="data:images/img02.jpg"><span><a href="">产看详情</a><b>谁谁谁水水水水</b></span></li>
<li><img src="data:images/img03.jpg"><span><a href="">产看详情</a><b>谁谁谁水水水水</b></span></li>
<li><img src="data:images/img04.jpg"><span><a href="">产看详情</a><b>谁谁谁水水水水</b></span></li>
<li><img src="data:images/img05.jpg"><span><a href="">产看详情</a><b>谁谁谁水水水水</b></span></li>
</ul>
<ul id="roll-img2" class="roll-img"></ul>
</div>
</div>
<div class="roll-btn">
<span class="roll-prev">1</span>
<span class="roll-next">2</span>
</div>