图片无缝向右滚动

最新推荐文章于 2022-05-17 19:47:08 发布

fh2627

最新推荐文章于 2022-05-17 19:47:08 发布

阅读量469

点赞数

分类专栏： css基础

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;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}


   </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;
    function Marquee() {
        if (tab.scrollLeft <= 0)
            tab.scrollLeft += tab2.offsetWidth
        else {
            tab.scrollLeft--;
        }
    }
    var MyMar = setInterval(Marquee, speed);
    tab.onmouseover = function () { clearInterval(MyMar) };
    tab.onmouseout = function () { MyMar = setInterval(Marquee, speed) };

</script>
</html>

fh2627

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
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;width: 500px
复制链接

扫一扫

专栏目录