原生JS實(shí)現(xiàn)跑馬燈效果
更新時(shí)間：2017年02月20日 10:26:28 作者：前端工程師_錢(qián)成
本文主要分享了原生JS實(shí)現(xiàn)跑馬燈效果的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
效果如下：（動(dòng)態(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>
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
JavaScript最全公共方法匯總并解析（前端開(kāi)發(fā)收藏必備）
JavaScript掌握各種常用的公共方法更是提升開(kāi)發(fā)效率和代碼質(zhì)量的關(guān)鍵,無(wú)論你是初學(xué)者還是資深開(kāi)發(fā)者,了解并熟練運(yùn)用這些方法都能讓你的代碼更加簡(jiǎn)潔、高效,本篇博客將為你詳細(xì)匯總并解析最全的JavaScript公共方法,涵蓋數(shù)組、對(duì)象、字符串、日期等各個(gè)方面的常用技巧2024-06-06
javascript動(dòng)畫(huà)之磁性吸附效果篇
在實(shí)際應(yīng)用中，常常需要為拖拽的元素限定范圍。而通過(guò)限定范圍，再增加一些輔助的措施，就可以實(shí)現(xiàn)磁性吸附的效果。本文將詳細(xì)介紹javascript的磁性吸附，有需要的朋友可以參考借鑒。2016-12-12
本篇文章主要介紹了webpack中的熱刷新與熱加載的區(qū)別，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
JavaScript獲得url查詢(xún)參數(shù)的方法
這篇文章主要介紹了JavaScript獲得url查詢(xún)參數(shù)的方法,可實(shí)現(xiàn)針對(duì)URL中參數(shù)分析的功能,需要的朋友可以參考下2015-07-07
Egg.js 中 AJax 上傳文件獲取參數(shù)的方法
這篇文章主要介紹了Egg.js 中 AJax 上傳文件獲取參數(shù),需要的朋友可以參考下2018-10-10
js 實(shí)現(xiàn)css風(fēng)格選擇器（壓縮后2KB）
近日在做一些OA前端界面，為了更好管理頁(yè)面代碼想寫(xiě)個(gè)js選擇器，寫(xiě)著寫(xiě)著發(fā)現(xiàn)很費(fèi)力，索性在網(wǎng)上找找看，功夫不負(fù)有心人， 找到一個(gè)mini css選擇器，且性能不凡：以下代碼是壓縮后的，僅2KB2012-01-01
得到當(dāng)前行的值的javascript代碼...2007-06-06
JavaScript實(shí)現(xiàn)頁(yè)面5秒后自動(dòng)跳轉(zhuǎn)的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)頁(yè)面5秒后自動(dòng)跳轉(zhuǎn)的方法,涉及javascript遞歸調(diào)用與計(jì)時(shí)函數(shù)setTimeout的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
有一id=test的下拉框，怎么拿到選中的那個(gè)值呢？本文將采用javascript原生的方法及jquery方法（前提是已經(jīng)加載了jquery庫(kù)）來(lái)簡(jiǎn)單實(shí)現(xiàn)下2013-10-10
uni?app跨端自定義指令實(shí)現(xiàn)按鈕權(quán)限
這篇文章主要為大家介紹了uni?app跨端自定義指令實(shí)現(xiàn)按鈕權(quán)限詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12