• jQery无缝滚动效果


    思路:

    赋值所有li,添加到ul末尾,重新计算ul宽度

    每次移动一个固定的值,当超出一半时,将ul拉回原位

    以下代码

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>无缝滚动</title>
            <style type="text/css">
                *{
                    margin: 0;
                    padding: 0;
                }
                img{
                    display: block;
                }
                ul,li{
                    list-style: none;
                }
                #box{
                     440px;
                    height: 88px;
                    margin: 50px auto;
                    border: 3px solid #DCDCDC;
                    position: relative;
                    overflow: hidden;
                }
                #list{
                    position: absolute;
                }
                #list li{
                    float: left;
                     88px;
                    height: 88px;
                }
            </style>
            <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
            <script type="text/javascript">
                $(function(){
                    //将ul的内容复制一遍添加到ul中,
                    $('#list').append($('#list').html());
                    //改变list的长度
                    $('#list').width($('#list li').eq(0).width() * $('#list li').length)
                    setInterval(move,10)
                })
                var x = 0; //每次移动的长度
                function move(){
                    //判读超过ul的一半,拉回来重新开始
                    if(x <= -($('#list').width()/2)){
                        x = 0;
                    }
                    $('#list').css('left',x)
                    x-=1;
                }
            </script>
        </head>
        <body>
            <div id="box">
                <ul id="list">
                    <li><img src="img/1.jpg" alt="" /></li>
                    <li><img src="img/2.jpg" alt="" /></li>
                    <li><img src="img/3.jpg" alt="" /></li>
                    <li><img src="img/4.jpg" alt="" /></li>
                    <li><img src="img/5.jpg" alt="" /></li>
                </ul>
            </div>
        </body>
    </html>
    代码的世界水太深,潜行的心态很纯真!
  • 相关阅读:
    软件工程--团队作业3
    软件工程--团队作业2
    软工实践学习(第三次)
    软工实践学习(第二次)
    软工实践学习(第一次)
    构建之法现代软件工程(第五次)
    构建之法现代软件工程(第四次)
    结对编程(第二次)
    结对编程(第一次)
    构建之法现代软件工程(第三次)
  • 原文地址:https://www.cnblogs.com/Q-zhangsan/p/6127981.html
Copyright © 2020-2023  润新知