原生JS实现跑马灯效果
更新时间：2017年02月20日 10:26:28 作者：前端工程师_钱成
本文主要分享了原生JS实现跑马灯效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
效果如下：（动态效果可复制代码查看，案例中的图片可自行选择添加）
代码如下：
<!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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
JavaScript最全公共方法汇总并解析（前端开发收藏必备）
JavaScript掌握各种常用的公共方法更是提升开发效率和代码质量的关键,无论你是初学者还是资深开发者,了解并熟练运用这些方法都能让你的代码更加简洁、高效,本篇博客将为你详细汇总并解析最全的JavaScript公共方法,涵盖数组、对象、字符串、日期等各个方面的常用技巧2024-06-06
在实际应用中，常常需要为拖拽的元素限定范围。而通过限定范围，再增加一些辅助的措施，就可以实现磁性吸附的效果。本文将详细介绍javascript的磁性吸附，有需要的朋友可以参考借鉴。2016-12-12
本篇文章主要介绍了webpack中的热刷新与热加载的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了JavaScript获得url查询参数的方法,可实现针对URL中参数分析的功能,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了Egg.js 中 AJax 上传文件获取参数,需要的朋友可以参考下2018-10-10
近日在做一些OA前端界面，为了更好管理页面代码想写个js选择器，写着写着发现很费力，索性在网上找找看，功夫不负有心人， 找到一个mini css选择器，且性能不凡：以下代码是压缩后的，仅2KB2012-01-01
得到当前行的值的javascript代码...2007-06-06
这篇文章主要介绍了JavaScript实现页面5秒后自动跳转的方法,涉及javascript递归调用与计时函数setTimeout的使用技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
有一id=test的下拉框，怎么拿到选中的那个值呢？本文将采用javascript原生的方法及jquery方法（前提是已经加载了jquery库）来简单实现下2013-10-10
这篇文章主要为大家介绍了uni app跨端自定义指令实现按钮权限详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
最新评论