無縫滾動js代碼通俗易懂(自寫)

更新時間：2013年06月19日 17:40:13 作者：

本人閑暇時自寫的無縫滾動js，代碼簡單實用，通俗易懂，曬出來與大家共享，感興趣的朋友可以參考下哈

 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>無標題文檔</title> 
<style> 
*{padding:0; margin:0;} 
ul{ list-style:none;} 
#div{ width:300px; height:100px; margin:100px auto; border:1px solid #ff0000; position:relative; overflow:hidden;} 
#div ul{ position:absolute; height:100px; left:0;} 
#div ul li{ width:300px; height:100px; line-height:100px; text-align:center; float:left} 
</style> 
<script> 
window.onload=function(){ 
var oDiv=document.getElementById("div"); 
var oUl=oDiv.getElementsByTagName("ul")[0]; 
var oLi=oUl.getElementsByTagName("li"); 
var oInput=document.getElementsByTagName('input'); 
oUl.innerHTML +=oUl.innerHTML; 
oUl.style.width=oLi[0].offsetWidth*oLi.length+"px"; 
var iSeep=-2; 
var tamer=null; 
clearInterval(tamer); 
function starMove(){ 
tamer=setInterval(function(){ 
oUl.style.left=oUl.offsetLeft+iSeep+"px"; 
if(-oUl.offsetLeft >= oUl.offsetWidth/2){ 
oUl.style.left="0px"; 
}else if(oUl.offsetLeft>0){ 
oUl.style.left=-oUl.offsetWidth/2+"px"; 
} 
},30) 
} 
starMove(); 
oDiv.onmouseover=function(){ 
clearInterval(tamer); 
} 
oDiv.onmouseout=function(){ 
starMove(); 
} 
oInput[0].onclick=function(){ 
iSeep=-2; 
} 
oInput[1].onclick=function(){ 
iSeep=2; 
} 
} 
</script> 
</head> 
<body> 
<input type="button" value="左"> 
<input type="button" value="右"> 
<div id='div'> 
<ul> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
</ul> 
</div> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

微信小程序自定義多列選擇器使用
這篇文章主要為大家詳細介紹了微信小程序自定義多列選擇器使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07
javascript中去除數(shù)組重復元素的實現(xiàn)方法【實例】
下面小編就為大家?guī)硪黄猨avascript中去除數(shù)組重復元素的實現(xiàn)方法【實例】。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧
2016-04-04
javascript勻速動畫和緩沖動畫詳解
這篇文章主要為大家詳細介紹了javascript勻速動畫和緩沖動畫,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-10-10
原生Javascript插件開發(fā)實踐
本文主要介紹了原生Javascript插件開發(fā)的思路分析以及使用示例。具有一定的參考價值，下面跟著小編一起來看下吧
2017-01-01
詳解微信小程序scroll-view橫向滾動的實踐踩坑及隱藏其滾動條的實現(xiàn)
這篇文章主要介紹了詳解微信小程序scroll-view橫向滾動的實踐踩坑及隱藏其滾動條的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-03-03
自己封裝的一個簡單的倒計時功能實例
下面小編就為大家?guī)硪黄约悍庋b的一個簡單的倒計時功能實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-11-11
javascript驗證郵件地址和MX記錄的方法
這篇文章主要介紹了javascript驗證郵件地址和MX記錄的方法,涉及javascript正則驗證的相關(guān)技巧,需要的朋友可以參考下
2015-06-06
js調(diào)試工具 Javascript Debug Toolkit 2.0.0版本發(fā)布
Javascript Debug Toolkit是一個可以跨瀏覽器調(diào)試javascript的開源項目，支持在IE,FIREFOX,SAFARI,CHROME等瀏覽器中調(diào)試javascript。2.0.0版本做了較大變動，增加以下功能
2008-12-12
JavaScript 另類遍歷數(shù)組實現(xiàn)代碼
JavaScript 另類遍歷數(shù)組實現(xiàn)代碼，大家可以看下。
2009-10-10
JS/jQuery實現(xiàn)簡單的開關(guān)燈效果【案例】
這篇文章主要介紹了JS/jQuery實現(xiàn)簡單的開關(guān)燈效果,結(jié)合具體實例形式分析了javascript/jQuery事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
2019-02-02