原生JS實(shí)現(xiàn)跑馬燈效果
更新時間：2017年02月20日 10:26:28 作者：前端工程師_錢成
本文主要分享了原生JS實(shí)現(xiàn)跑馬燈效果的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧
效果如下：（動態(tài)效果可復(fù)制代碼查看，案例中的圖片可自行選擇添加）
代碼如下：
<!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>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
通用的javascript 換行色換列色的小js...2007-04-04
動態(tài)生成的IFRAME，設(shè)置SRC時的，不同位置帶來的影響
動態(tài)生成的IFRAME，設(shè)置SRC時的，不同位置帶來的影響。 以下所說的是在IE7下運(yùn)行的。IE6下也是同樣。 在這個blog中，直接點(diǎn)擊運(yùn)行代碼，和把下面代碼保存到為網(wǎng)頁在運(yùn)行（以本地文件或域名訪問），效果不一樣。2008-03-03
小程序內(nèi)是不能直接分享到朋友圈的。所以只能通過生成圖片，攜帶小程序二維碼，保存到手機(jī)相冊，讓用戶自己選擇發(fā)到朋友圈。然后可以通過在小程序中識別二維碼來進(jìn)入小程序的指定頁面。下面小編給大家分享實(shí)現(xiàn)代碼，需要的朋友參考下吧2018-05-05
JavaScript實(shí)現(xiàn)的CRC32函數(shù)示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的CRC32函數(shù),簡單介紹了CRC32函數(shù)的概念和功能,并給出實(shí)例形式分析了CRC32函數(shù)的javascript實(shí)現(xiàn)與使用方法,需要的朋友可以參考下2016-11-11
做了一個判斷瀏覽器類型和版本號的業(yè)務(wù)，記錄下相關(guān)的js代碼，個人感覺還不錯，需要的朋友可以參考下2013-10-10
jQuery中 DOM節(jié)點(diǎn)操作方法大全
本文給大家介紹了jQuery中 DOM節(jié)點(diǎn)操作方法大全，感興趣的朋友一起看看吧2017-10-10
JavaScript控制圖片加載完成后調(diào)用回調(diào)函數(shù)的方法
這篇文章主要介紹了JavaScript控制圖片加載完成后調(diào)用回調(diào)函數(shù)的方法,實(shí)例分析了javascript回調(diào)函數(shù)的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
javascript面向?qū)ο笾L問對象屬性的兩種方式分析
這篇文章主要介紹了javascript面向?qū)ο笾L問對象屬性的兩種方式分析,實(shí)例分析了直接訪問對象屬性的方式與數(shù)組訪問方式,需要的朋友可以參考下2015-01-01
現(xiàn)代 JavaScript 開發(fā)編程風(fēng)格Idiomatic.js指南中文版
下面的章節(jié)描述的是一個 合理 的現(xiàn)代 JavaScript 開發(fā)風(fēng)格指南，并非硬性規(guī)定。其想送出的核心理念是高度統(tǒng)一的代碼風(fēng)格（the law of code style consistency）。2014-05-05
把JS與CSS寫在同一個文件里的書寫方法...2007-06-06