JavaScript-无缝滚动(offset)

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

<!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;

JavaScript-无缝滚动(offset)

猜你喜欢