jquery——无缝滚动

无缝滚动：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝滚动</title>
    <script type="text/javascript" src="jquery-1.12.4.min.js"></script>
    <style type="text/css">
        body,ul,li{
            margin:0;
            padding:0;
        }
        ul{list-style: none;}
        .slide{
            width:500px;
            height:100px;
            border:1px solid #ddd;
            margin:20px auto 0;
            position: relative;
            overflow:hidden;
        }

        .slide ul{
            position: absolute;
            width:1000px;
            height:100px;
            left:0;
            top:0;
        }
        .slide ul li{
            width:90px;
            height:90px;
            margin:5px;
            background-color: antiquewhite;
            line-height: 90px;
            text-align:center;
            font-size:30px;
            float:left;
        }

        .btns{
            width:500px;
            height:50px;
            margin:10px auto 0;
        }
        
    </style>
    <script type="text/javascript">

        $(function () {
            var $ul = $('#slide ul');
            var left = 0;
            var speed = 2;

            $ul.html($ul.html()+$ul.html());

            var move = function () {
                left-=speed;
                if(left<-500){
                    left = 0;
                }
                if(left>0){
                    left = -500;
                }
                $ul.css({left:left});
            };

            var timer = setInterval(move,30);

            $('#btn1').click(function () {
                speed = 2;
            });
            $('#btn2').click(function () {
                speed = -2;
            });
            $('#slide').mouseover(function () {
                clearInterval(timer);
            });
            $('#slide').mouseout(function () {
                timer = setInterval(move,30);
            })
        })

    </script>
</head>
<body>
    <div class="btns">
        <input type="button" name="" value="向左" id="btn1">
        <input type="button" name="" value="向右" id="btn2">
    </div>
    <div class="slide" id="slide">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</body>
</html>
效果展示：
jquery——无缝滚动

猜你喜欢
