jquery实现无缝滚动 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS</title>
    <style>
        #box{
            width:800px;
            height:150px;
            border:3px solid #333;
            overflow:hidden;
        }
        #content{
            width:10000px;
        }
        #imglist{
            float:left;
        }
        #box img{
            width:200px;
            height:150px;
            float:left;
        }
    </style>
    <script src="jquery-1.8.3.min.js"></script>
</head>
<body>
    <h1>无缝滚动</h1>
    <hr>
    <div id="box">
        <div id="content">
            <div id="imglist">
                <img src="../images/Meinv001.jpg">
                <img src="../images/Meinv002.jpg">
                <img src="../images/Meinv003.jpg">
                <img src="../images/Meinv004.jpg">
                <img src="../images/Meinv005.jpg">
                <img src="../images/Meinv006.jpg">        
                <img src="../images/Meinv007.jpg">        
                <img src="../images/Meinv008.jpg">        
                <img src="../images/Meinv009.jpg">        
                <img src="../images/Meinv010.jpg">        
            </div>
        </div>
    </div>
        

    
    <script>
    
    $("#imglist").clone().appendTo("#content");
    
    //定时调用
     setInterval(function(){
        if ($("#box").scrollLeft() >= 2000) {
            $("#box").scrollLeft(0);
        }
        $("#box").scrollLeft($("#box").scrollLeft() + 10);
     }, 100);
    
    
        
    </script>
    
</body>
</html>

 

posted on 2015-12-20 14:33  岩_生  阅读(445)  评论(0)  编辑  收藏  举报

导航