图片无缝向上滚动

最新推荐文章于 2021-06-09 19:06:38 发布

fh2627

最新推荐文章于 2021-06-09 19:06:38 发布

阅读量291

点赞数

分类专栏： css基础

本文链接：https://blog.csdn.net/fh2627/article/details/74009142

版权

css基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

亲测有效

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
      #demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
height: 100px;
text-align: center;
float: left;
}
#demo img {
border: 3px solid #F2F2F2;
display: block;
}

   </style>

</head>
<body>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="homepagePicture/botAd1.gif"  alt="1"/></a>
<a href="#"><img src="homepagePicture/botAd2.gif"  alt="1"/></a>
<a href="#"><img src="homepagePicture/botAd3.gif"  alt="1"/></a>
<a href="#"><img src="homepagePicture/botAd4.gif"  alt="1"/></a>
<a href="#"><img src="homepagePicture/botAd5.gif"  alt="1"/></a>
<a href="#"><img src="homepagePicture/botAd6.gif"  alt="1"/></a>
</div>
<div id="demo2"></div>
</div>
</div>

</body>
<script type="text/javascript">
    var speed = 10; //数字越大速度越慢
    var tab = document.getElementById("demo");
    var tab1 = document.getElementById("demo1");
    var tab2 = document.getElementById("demo2");
    tab2.innerHTML = tab1.innerHTML; //克隆demo1为demo2
    function Marquee() {
        if (tab2.offsetTop - tab.scrollTop <= 0)//当滚动至demo1与demo2交界时
            tab.scrollTop -= tab1.offsetHeight //demo跳到最顶端
        else {
            tab.scrollTop++
        }
    }
    var MyMar = setInterval(Marquee, speed);
    tab.onmouseover = function () { clearInterval(MyMar) }; //鼠标移上时清除定时器达到滚动停止的目的
    tab.onmouseout = function () { MyMar = setInterval(Marquee, speed) }; //鼠标移开时重设定时器

</script>
</html>

fh2627

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片无缝向上滚动

亲测有效<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> #demo {background: #FFF;overflow:hidden;border: 1px dashed #CCC;height:
复制链接

扫一扫