文字左右輪播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding:0;
            margin:0;
            font-family:"微軟雅黑";
        }
        li {
            list-style:none;
        }
        a {
            text-decoration:none;
        }
        img {
            border:none;
        }
        .box {
            padding-left:50px;
            /*background:url("images/xtb.png") no-repeat;*/
            margin-top:100px;
            margin-left:100px;
        }
        .winBox {
            width:300px;
            height:40px;
            overflow:hidden;
            position:relative;
            background:pink;
        }
        .scroll {
            /*width的大小是根據(jù)下面li的長度和多少個li而定的，需注意！*/
            width:1500px;
            position:absolute;
            left:0px;
            top:0px;
        }
        .scroll li {
            width:150px;
            float:left;
            line-height:40px;
            text-align:center;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="winBox">
        <ul class="scroll">
            <li><a href="#">時尚休閑褲68元</a></li>
            <li><a href="#">羊呢絨套衫38元</a></li>
            <li><a href="#">新款雪地靴88元</a></li>
            <li><a href="#">加厚法蘭絨108元</a></li>
            <li><a href="#">連褲襪19元2雙</a></li>
            <!--給所要的內(nèi)容復制一份-->
            <li><a href="#">時尚休閑褲68元</a></li>
            <li><a href="#">羊呢絨套衫38元</a></li>
            <li><a href="#">新款雪地靴88元</a></li>
            <li><a href="#">加厚法蘭絨108元</a></li>
            <li><a href="#">連褲襪19元2雙</a></li>
        </ul>
    </div>
</div>

<script src="http://cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
<script type="text/javascript">
    $(function() {
        var num = 0;
        function goLeft() {
            //750是根據(jù)你給的尺寸，可變的
            if (num == -750) {
                num = 0;
            }
            num -= 1;
            $(".scroll").css({
                left: num
            })
        }
        //設置滾動速度
        var timer = setInterval(goLeft, 20);
        //設置鼠標經(jīng)過時滾動停止
        $(".box").hover(function() {
                clearInterval(timer);
            },
            function() {
                timer = setInterval(goLeft, 20);
            })
    })
</script>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容