Achieve a set of picture circulation and end-to-end scrolling effect

Design idea: Store two identical contents (using one row and multiple list cells) as a scroll object in a Div, and hide the content of the excess width, define the method of Div moving in the JS script (horizontal coordinate plus 1). When the first content completely disappears (that is, the distance that Div moves to the left reaches the width of the Div, and the second content is completely displayed at this time), the coordinates of the scroll bar are reset and a new round is started.

code show as below:

< html > 
< head > 
    < meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" > 
    < title > a group of pictures with a scrolling effect that is connected end to end </ title > 
    < style > 
    #bg { 
        width : 940px ; height : 300px ;
        background: url (images / boutique display.jpg);
        } 
    #sm { / * Scrolling object style * / 
        overflow : hidden ; / * Hide extra content in Div, add pictures will scroll together * / 
        width : 920px ; height : 280px ; 
        margin : 0 auto ; 
        padding-top : 30px ; 
        } 
    </ style > 
</ head > 
< body > 
< center > 
    < div id = "bg" > 
        < div id= "sm" >     <!- scroll div- > 
                < table >         <!- outside table 1x2, and the second cell is empty- > 
                    < tr > 
                        < td id = "Pic1" > 
                            < table >     <!- Inside table 1x9, store 9 pictures- > 
                                < tr > 
                                    < td > < img src = "images / 1.jpg" οnmοuseοver = "mouseover (this)" οnmοuseοut = "mouseout (this)" /> </ td > 
                                    < td > <img src="images/2.jpg" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)"/></td>
                                    <td><img src="images/3.jpg" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)"/></td>
                                    <td><img src="images/4.jpg" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)"/></td>
                                    <td><img src="images/5.jpg" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)"/></td>
                                    <td><img src="images/6.jpg" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)"/></td>
                                    <td><img src="images/7.jpg" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)"/></td>
                                    <td><img src="images/8.jpg" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)"/></td>
                                    <td><img src="images/9.jpg" οnmοuseοver="mouseover(this)" οnmοuseοut="mouseout(this)"/></td>
                                </tr>
                           </table>
                       </td>
                    <td id="Pic2"></td>
                    </tr>
                </table>
        </div>
    </div>
</center>
 
<!- The client script below cannot be placed at the head of the page- >
 
< script > 
    Pic2.innerHTML = Pic1.innerHTML; // Copy a set of pictures, but it is hidden 
    function scrolltoleft () { // Define the method of moving to the left 
        sm.scrollLeft ++ ; // Change the horizontal coordinate of the layer to achieve Move left 
        if (sm.scrollLeft > = Pic1.scrollWidth) // require reset 
            sm.scrollLeft = 0 ; // reset the position of the layer, the width of the browser window is limited 
    }
    
    var MyMar = setInterval (scrolltoleft, 40 ); // Timer, cannot be added after the method name ()
    
    function mouseover (x) { // Enlarge the picture 
        x.style.width = " 210 " ;
        x.style.height="256"
        x.style.cursor="pointer"
    }
    function mouseout (x) { // Image restoration 
        x.style.width = " 105 " ;
        x.style.height="128"
    }
 
    // Two sides and two lines are to respond to the event of the object with a method 
    sm.οnmοuseοver = function () { // Anonymous method (function) 
        clearInterval (MyMar); // stop scrolling 
    }
    
    sm.οnmοuseοut=function(){
        MyMar = setInterval (scrolltoleft, 40 ); // Continue scrolling 
    }
    
 
</script>                            
</body>
</html>