JavaScript-无缝滚动(offset)

最新推荐文章于 2021-07-15 10:21:02 发布

原创最新推荐文章于 2021-07-15 10:21:02 发布 · 328 阅读

3 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的无缝图片滚动效果。通过设置图片的宽度和位置属性，可以创建一个平滑连续的横向滚动展示。用户可以通过点击按钮来控制滚动的方向和速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

无缝滚动用以网站图片横向自动滚动浏览

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0;padding: 0;
    }
    img{
        height:168px;
        width: 200px; 
    }
    li{
        list-style: none;
        float: left;
    }
    #div1{
        height: 168px;
        width: 800px;
        margin: 100px auto;
        position: relative;
        overflow: hidden;

    }
    ul{
        position: absolute;
        left: 0;
        top: o;
    }
    </style>

</head>
<body>
    <a href="javascript:;">向左</a>
    <a href="javascript:;">向右</a>
    <a href="javascript:;">加速</a>
    <a href="javascript:;">减速</a>
<div id="div1">
    <ul>
        <li><img src="照片/桥.jpg"></li>
        <li><img src="照片/彩虹.jpg"></li>
        <li><img src="照片/窗户.jpg"></li>
        <li><img src="照片/烟雾.jpg"></li>
    </ul>
</div>
    
</body>
<script>
var oDiv=document.getElementById('div1');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var speed=2;

oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';

function move(){
    //向左滚动
    if(oUl.offsetLeft<-oUl.offsetWidth/2)
        oUl.style.left='0';

    // oUl.style.left=oUl.offsetLeft-2+'px';

    //向右滚动
    if(oUl.offsetLeft>0)
        oUl.style.left=-oUl.offsetWidth/2+'px';

    oUl.style.left=oUl.offsetLeft+speed+'px';
}

var timer=setInterval(move,30)
oDiv.onmouseover=function(){
    clearInterval(timer);
}
oDiv.onmouseout=function(){
    timer=setInterval(move,30);
}
//向左滚动
document.getElementsByTagName('a')[0].onclick=function(){
    speed=-2;
}
//向右滚动
document.getElementsByTagName('a')[1].onclick=function(){
    speed=2;
}
//加速滚动
document.getElementsByTagName('a')[2].onclick=function(){
    speed=speed+speed;
}
//减速滚动
document.getElementsByTagName('a')[3].onclick=function(){
    speed=speed/2;
}
</script>
</html>

offsetleft:用于获取物体左边距
offsetTop:用于获取物体上边距
offsetlWidth:用于获取物体宽度

innerHTML用于获取标签内的内容

<a href="javascript:;"></a>
在执行该段代码时，去执行<script>里调用该便签的代码

margin：0px auto;