关于javascript:js实现图片无缝循环跑马灯

31次阅读

共计 2227 个字符，预计需要花费 6 分钟才能阅读完成。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <link rel="stylesheet" type="text/css"  rel="external nofollow" />
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .marquee{
            width: 100%;
            height: 36px;
            line-height: 36px;
            margin: 50px auto 0;
        }

        .marquee .marquee_text {
            width: 100%;
            height: 36px;
            margin: 0 auto;
            overflow: hidden;
            white-space: nowrap;
            background: #E3E3E3;
            color: #a6a6a6;
        }
        .marquee .scroll_begin,
        .marquee .scroll_end,
        .marquee .scroll_begin ul,
        .marquee .scroll_end ul,
        .marquee .scroll_begin ul li,
        .marquee .scroll_end ul li {display: inline-block;}

        .marquee .scroll_begin ul li,
        .marquee .scroll_end ul li {
            display: inline-block;
            min-width: 200px;
            margin-right:20px
        }

        .marquee .scroll_begin ul li a:hover,
        .marquee .scroll_end ul li a:hover {text-decoration: underline;}

    </style>
</head>
<body>
<div class="marquee wrapper">
    <div class="marquee_text" >
        <div class="scroll_begin">
            <ul>
                <li>✨<b>New Member Exclusive Offer</b>✨Free register to enjoy <b>2000 points points</b> for your purchase (no minimum spends&nbsp;required)</li>
                <li><b><a href="#" style="color:#000000;">Click here</a></b>: Just 7 easy steps to sell your Products! Get a free valuation for your  collections now.</li>
                <li>Under the law of Hong Kong, intoxicating liquor must not be sold or supplied to a minor in the course of business. 根據香港法律，不得在業務過程中，向未成年人售賣或供應令人醺醉的酒類。</li>
            </ul>
        </div>
        <div class="scroll_end">
        </div>
    </div>
</div>

</body>
<script src="https://cdn.51cto.com/jquery/jquery-2.2.4.min.js"></script>
<script>
    $(function(){
        // 自动播放 定时器
        getScroll();

        function getScroll(){
            // 1. 抓取元素
            var marquee_text = $('.marquee_text')[0];
            console.log(marquee_text);

            var scroll_begin = $('.scroll_begin')[0];
            console.log(scroll_begin);

            var scroll_end = $('.scroll_end')[0];
            console.log(scroll_end);

            // 向 end 这个盒子中 搁置存储 内容
            scroll_end.innerHTML = scroll_begin.innerHTML;

            // 跑马灯成果
            function Marquee(){if(scroll_end.offsetWidth - marquee_text.scrollLeft <= 0){marquee_text.scrollLeft -= scroll_end.offsetWidth;}else{marquee_text.scrollLeft++;}
            }

            var timer = setInterval(Marquee,30)

            // 鼠标移入 div 盒子上的时候，咱们要革除定时器
            $('.marquee_text').mouseover(function(){clearInterval(timer);
            })

            // 鼠标移出 div 盒子的时候，咱们要启动定时器
            $('.marquee_text').mouseout(function(){timer = setInterval(Marquee,30)
            })
        }
    })
</script>
</html>

正文完