1. 程式人生 > >JavaScript-無縫滾動(offset)

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>

1

offsetleft:用於獲取物體左邊距
offsetTop:用於獲取物體上邊距
offsetlWidth:用於獲取物體寬度

2

innerHTML用於獲取標籤內的內容

3

<a href="javascript:;"></a>
在執行該段程式碼時,去執行<script>裡呼叫該便籤的程式碼

4

margin:0px auto;