php跑马灯效果,原生JS实现跑马灯效果

本文主要分享了原生JS实现跑马灯效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧

效果如下：(动态效果可复制代码查看，案例中的图片可自行选择添加)

代码如下：

*{

margin:0;

padding:0;

list-style: none;

}

p{

position: relative;

width: 800px;

height: 200px;

border: 5px solid lightgreen;

margin:10px auto;

overflow: hidden;

}

p ul{

position: absolute;

left:0;

top:0;

}

p ul li{

width: 200px;

height: 200px;

float: left;

}

p ul li img{

width:100%;

height: 100%;

}

• 
• 
• 
• 

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

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

oUl.innerHTML+=oUl.innerHTML;

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

var left=null;

var timer=setInterval(function(){

left-=3;

if(left

left=0;

}

oUl.style.left=left+'px'

},10)

更多原生JS实现跑马灯效果相关文章请关注PHP中文网！

本文原创发布php中文网，转载请注明出处，感谢您的尊重！