原生JS实现跑马灯效果
2017-02-20 10:26
751 查看
效果如下:(动态效果可复制代码查看,案例中的图片可自行选择添加)
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ 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%; } </style> </head> <body> <div id="div1"> <ul> <li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=b4251f00ef925cba01ed49ca117e14a7" alt=""/></li> <li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=d38403825519770211acbf49459ae7d7" alt=""/></li> <li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=53c83d39c62af65db998f4945bacaec2" alt=""/></li> <li><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=5509f1a642644b40c8aa98c9e2c77a83" alt=""/></li> </ul> </div> <script> 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<-oUl.offsetWidth/2){ left=0; } oUl.style.left=left+'px' },10) </script> </body> </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
您可能感兴趣的文章:
相关文章推荐
- 原生js实现跑马灯抽奖效果
- 原生Js实现按的数据源均分时间点幻灯片效果(已封装)
- 原生js实现document.ready效果
- js实现图片轮番效果,原生代码
- JS原生效果瀑布流布局的实现(一)
- 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)
- js实现跑马灯效果
- 原生js实现fadein 和 fadeout淡入淡出效果
- 原生js实现半透明遮罩层效果具体代码
- 使用原生js实现页面蒙灰(mask)效果示例代码
- 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo) (转http://www.cnblogs.com/mrthink/archive/2011/01/29/1947532.html)
- 原生 JS 代码和用 jQuery 实现效果各有什么优劣势
- 原生JS实现图片轮滚效果
- 原生Js实现按数据源均分时间点幻灯效果(已封装)
- 原生js实现document.ready效果
- JS 跑马灯效果实现(很好用)
- javascript实现tabs选项卡切换效果(自写原生js)
- 使用原生js实现页面蒙灰(mask)效果
- 原生JS、CSS实现的转盘效果(目前仅支持webkit)