先全部显示然后在滚动

最新推荐文章于 2021-11-21 11:02:55 发布

iteye_9926

最新推荐文章于 2021-11-21 11:02:55 发布

阅读量111

点赞数

分类专栏： JavaScript 文章标签： marquee滚动之前空白的解决方案收藏

本文链接：https://blog.csdn.net/iteye_9926/article/details/81792014

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<div id="scroll_div" style="overflow: hidden; height: 137px; width: 658px; white-space: nowrap;">
        <div id="scroll_begin" style="display: inline;">
            <img src="image/1.jpg" width="200" height="137" border="0">
            <img src="image/2.jpg" width="200" height="137" border="0">
            <img src="image/3.jpg" width="200" height="137"
                    border="0">
            <img src="image/4.jpg" width="200" height="137" border="0"><img src="image/5.jpg"
                        width="200" height="137" border="0">
            <img src="image/6.jpg" width="200" height="137"
                            border="0">
            <img src="image/7.jpg" width="200" height="137" border="0">
            <img src="image/8.jpg"
                                width="200" height="137" border="0">
        </div>
        <div id="scroll_end" style="display: inline;">
        </div>
    </div>

    <script>
var speed=1
var scroll_end = document.getElementById("scroll_end");
var scroll_div = document.getElementById("scroll_div");
scroll_end.innerHTML=scroll_begin.innerHTML
function Marquee(){
if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
scroll_div.scrollLeft-=scroll_begin.offsetWidth
else{
scroll_div.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
scroll_div.οnmοuseοver=function() {clearInterval(MyMar)}
scroll_div.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
    </script>