 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>無標(biāo)題文檔</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)文章

JavaScript自定義方法實現(xiàn)trim()、Ltrim()、Rtrim()的功能
去除字符串兩端的空格，是字符串處理非常常用的方法如何trim() 、Ltrim() 、Rtrim()，可惜的是javascript中無此方法，下面有個不錯的自定義教程感興趣的朋友可以參考下
2013-11-11
Javascript閉包實例詳解
閉包就是函數(shù)的局部變量集合，只是這些局部變量在函數(shù)返回后會繼續(xù)存在，本文通過代碼實例給大家介紹javascript閉包，對javascipt閉包相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
2015-11-11
簡單談?wù)刯avascript中的變量、作用域和內(nèi)存問題
這篇文章主要介紹了簡單談?wù)刯avascript中的變量、作用域和內(nèi)存問題的相關(guān)資料,需要的朋友可以參考下
2015-08-08
JS/Jquery判斷對象為空的方法
本文給大家分享的是JS/Jquery判斷對象是不是空對象的方法，十分的簡單實用，有需要的小伙伴可以參考下。
2015-06-06
p5.js臨摹旋轉(zhuǎn)愛心
這篇文章主要為大家詳細(xì)介紹了p5.js臨摹旋轉(zhuǎn)愛心，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-10-10
webpack DllPlugin xxx is not defined解決辦法
這篇文章主要介紹了webpack DllPlugin xxx is not defined解決辦法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
基于SpringMVC+Bootstrap+DataTables實現(xiàn)表格服務(wù)端分頁、模糊查詢
這篇文章主要介紹了基于SpringMVC+Bootstrap+DataTables實現(xiàn)表格服務(wù)端分頁、模糊查詢的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下
2016-10-10
一個簡單的Node.js異步操作管理器分享
這篇文章主要介紹了一個簡單的Node.js異步操作管理器分享,需要的朋友可以參考下
2014-04-04
js+canvas實現(xiàn)畫板功能
這篇文章主要為大家詳細(xì)介紹了js+canvas實現(xiàn)畫板功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09
JavaScript來實現(xiàn)打開鏈接頁面的簡單實例
下面小編就為大家?guī)硪黄狫avaScript來實現(xiàn)打開鏈接頁面的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06