js 实现marquee效果

简单介绍一下用js怎么实现marquee标签的效果，只要用到的是js的setInterval函数来控制轮播，将执行时间设置为30毫秒，每30毫秒执行一次方法（向左移动2px），因为宽度太小，时间太短，所以给人的感觉就是在一直向左轮播。

但是几张图片总有向左走完的那一刻，为了可以做到无缝轮播，需要将现有的所有图片作为一个整体，也是就ul，copy一份连接到后面，也就是说现在有两个ul，作为一个整体向左移动，当第一个ul移动完的时候，第二个刚出来的那一瞬间，迅速将第一个ul拽回来，然后从头开始………………

js代码

 window.onload=function()
 {
 var oDiv=document.getElementById('div1'); //获得到div
 var oUl=document.getElementsByClassName('marq_ul')[0]; //获得到ul
 var oLi=oUl.getElementsByTagName('li'); //获得到li
 var timer=null; //设置一个变量，后面要用
 oUl.innerHTML+=oUl.innerHTML; //将ul复制一份，连在一起
 oUl.style.width=oLi[0].offsetWidth*oLi.length+oLi.length*15+'px'; //让ul的宽度设置成每个li的宽度加上margin的宽度，记住是两个ul中li的总宽度
 function move(){ //定义一个move方法
 if(oUl.offsetLeft<-oUl.offsetWidth/2) //判断 如果ul相对于父对象的左边距小于总(2个)ul的宽度时(因为它的左边距肯定是负数)。
 {
 oUl.style.left='0'; //将left设置成0，也就是将它拽回来。
 }
 oUl.style.left=oUl.offsetLeft-2+'px'; //让ul的left等于它的左边距减2px
 };
 timer=setInterval(move,30); //定时器函数 每隔30毫秒执行一次move函数
 oDiv.onmouseover=function() //鼠标移入div是清除定时器
 {
 clearInterval(timer);
 };
 oDiv.onmouseout=function() //鼠标移出div是开启定时器
 {
 timer=setInterval(move,30);
 };
 };

html代码

css代码


*{ margin:0; padding:0;}
.marquee {width:1075px; height:150px; background:#49E8A0;
position:relative; overflow:hidden;}
.marquee ul { position:absolute; top:0px; left:0px; width:auto;}
.marquee ul li{ list-style:none; float:left; margin-right:15px;}

文章评论