網頁上無縫滾動的實現

時間 2019-11-19

標籤網頁無縫滾動實現欄目 HTML 简体版

原文原文鏈接

無縫滾動：javascript

1.實現原理：在一個固定大小的div裏面（div須要設置overfloow：hidden溢出部分隱藏！）改變圖片的offsetleft或者offsetright的值！從而實現圖片移動（須要給圖片加position：absolute）！css

2.改變left或right的值，則須要用到定時器setInterval（調用的函數，調用的時間）html

3.當圖片的left或則right大於了圖片的自己長度，這時候就會出現空白！解決的方法很簡單就是複製一個自己！當left或righr大於或等於通常的時候就把left或right從新賦值爲0.java

代碼以下：函數

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #div1{

            width: 100px;
            height: 100px;
          overflow:hidden;
        }
li{
float:left;
}
ul{
position:absolute;
left:0px;
top:0px;
}
    </style>
</head>
<body>

<div id="div1">
<ul>
<li><img src="img1"></li>

<li><img src="img1"></li>

<li><img src="img1"></li>

</ul>
</div>

</body>
<script type="text/javascript">
    var oul=document.getElementById("ul");
    var s=5;//定義速度
var fuzhi=oul.innerHTML+oul.innerHTML;
oul.innerHTML=fuzhi;
    div1.onclick=function(){

        clearInterval(t);
       t=setInterval(timer,30);
    };
    function timer(){

oul.style.left=oul.offsetLeft-sudu+"px";

            if(oul.offsetLeft<=-300){

　　　　　　　　oul.style.left=0;

        }</script></html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。