图片向左或者向右滚动

html代码：

<!--向左滚动-->
        <div class="box_4">
            <div class="roll" id="roll">
                <div class="roll_list">
                    <div class="ul_box" id="ul_box">
                        <a href=""><img src="img/1.jpg"/></a>
                        <a href=""><img src="img/2.jpg"/></a>
                        <a href=""><img src="img/3.jpg"/></a>
                        <a href=""><img src="img/4.jpg"/></a>
                    </div>
                    <div class="ul_box" id="ul_box2"></div>
                </div>
            </div>
        </div>

css代码：

    /*向左滚动*/
    .box_4{width:1200px;height:152px;margin:0 auto;overflow:hidden;}
    .roll{width:1200px;height:152px;overflow:hidden;}
    .roll_list{float:left;width:1000%;}
    .ul_box,.ul_box2{float:left;}
    .ul_box a,.ul_box a{width:290px;height:152px;display:block;float:left;margin-left:10px;}
    .ul_box a img,.ul_box a img{width:290px;height:152px;display:block;}

JS代码：

        var speed=30;
        ul_box2.innerHTML=ul_box.innerHTML;
        var Timer=setInterval(Marquee,speed);
        $('.roll').hover(function(){
            clearInterval(Timer);
        },function(){
            Timer=setInterval(Marquee,speed);
        })
        
        function Marquee(){
            if(ul_box2.offsetWidth-roll.scrollLeft<=0){
                roll.scrollLeft-=ul_box2.scrollWidth;
            }
            else{
                roll.scrollLeft++;
            }
        }