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

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

代码如下：

*{

margin:0;

padding:0;

list-style: none;

}

div{

position: relative;

width: 800px;

height: 200px;

border: 5px solid lightgreen;

margin:10px auto;

overflow: hidden;

}

div ul{

position: absolute;

left:0;

top:0;

}

div ul li{

width: 200px;

height: 200px;

float: left;

}

div 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)

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！