jquery 图片滚动

效果图：

$(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>