图片滚动

最新推荐文章于 2025-06-29 16:28:34 发布

weixin_42069386

最新推荐文章于 2025-06-29 16:28:34 发布

阅读量627

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42069386/article/details/82707773

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图片滚动 邮票</title>
    <style>
        .demo{
            width:578px;
            background-color: white;
            overflow: hidden;
            border: 1px dashed grey;
        }
        .indemo{
            float: left;
            width: 800%;
        }
        .demo1{
            float: left;
        }
        .demo2{
            float: left;
        }
        .demo a{
            display: block;
            width: 90px;
            height: 72px;
            float: left;
            border: 3px solid #F2F2F2;
        }
        .demo img{
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div class="demo">
    <div class="indemo">
        <div class="demo1">
            <a href="#"><img src="img/s1.JPG"></a>
            <a href="#"><img src="img/s5.JPG"></a>
            <a href="#"><img src="img/s2.JPG"></a>
            <a href="#"><img src="img/s6.JPG"></a>
            <a href="#"><img src="img/s3.JPG"></a>
            <a href="#"><img src="img/s4.JPG"></a>
        </div>
        <div class="demo2"></div>
    </div>
</div>
<script>
    var speed=10;
    var demo=document.getElementsByClassName("demo")[0];
    var demo1=document.getElementsByClassName("demo1")[0];
    var demo2=document.getElementsByClassName("demo2")[0];
    demo2.innerHTML=demo1.innerHTML;
    function myMar(){
        if(demo2.offsetWidth-demo.scrollLeft<=0){
            demo.scrollLeft-=demo2.offsetWidth;
        }
        else{
            demo.scrollLeft++;
        }
    }
    var mymar=setInterval(myMar,speed);
    //鼠标移入事件
    demo.onmouseover=function(){
        clearInterval(mymar);
    }
    //鼠标移出事件
    demo.onmouseout=function(){
        setInterval(mymar=setInterval(myMar,speed))
    }
</script>
</body>
</html>

scrollWidth 对象的实际内容的宽度，不包含边线宽度，会随对象中内容超过可视区后而变大 实际内容的宽度
clientWidth 对象内容的可视区的宽度，不包含滚动条等边线，会随对象显示大小的变化而改变 内容可视区的宽度
offsetWidth 对象整体的实际宽度,包含滚动条等边线，采用默认宽高显示 元素的实际宽度

clientLeft,clientTop 表示内容区域的左上角相对于整个元素左上角的位置（包括边框）（取决于边框？）
offsetLeft,offsetTop 相对于最近的祖先定位元素
scrollLeft,scrollTop 元素滚动的大小