网页上无缝滚动的实现

时间 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>