当前位置：首页 > 资讯 > 技术文档

javascript实现左右控制无缝滚动

时间：2020-04-09 21:37 编辑：来源：阅读：
扫一扫，手机访问

摘要：javascript实现左右控制无缝滚动

无缝滚动是项目中经常需要用到的一种特效，网上也有很多的示例代码，这里给大家分享的是一段比较简单实用的，而且兼容性也不错的代码，小伙伴们仔细研究下吧。 html 代码：

[url=css/0010.css] </head> <body> <a href="javascript:">向左走</a> <a href="javascript:">向右走</a> <div id="div1"> <ul> <li><img src="image/1.jpg"></li> <li><img src="image/2.jpg"></li> <li><img src="image/3.jpg"></li> <li><img src="image/4.jpg"></li> </ul> </div> </body> </html>

CSS代码

[u]复制代码[/u][/url] 代码如下:

*{ margin:0; padding: 0; } #div1{ overflow: hidden; background: blue; position: relative; width: 600px; height: 150px; margin:100px auto; } #div1 ul{ position: absolute; left: 0px; top: 0px; list-style: none; } #div1 ul li{ float: left; } #div1 ul li img{ width:150px; height:150px; }

js：代码

[u]复制代码[/u] 代码如下:

window.onload=function(){

    var oDiv=document.getElementById('div1');

    var oUl=oDiv.getElementsByTagName('ul')[0];

    var aLi=oUl.getElementsByTagName('li');

    var timer=null;

    var speed=2;//控制滚动速度以及方向

    oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;

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

    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;

    }

    function move(){//图片滚动

        if(oUl.offsetLeft<-oUl.offsetWidth/2){

            oUl.style.left=0;

        }

        if(oUl.offsetLeft>0){

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

        }

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

    }

}

效果是不是非常棒呢。

全部评论(0)

上一篇：一行代码实现纯数据json对象的深度克隆实现思路
下一篇：javascript事件的绑定基础实例讲解（34）

资讯排行榜
更多>>