 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>?????</title> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script> 
<style type="text/css"> 
body,ul,li { padding:0; margin:0} 
ul,li { list-style:none} 
.img-scroll { position:relative; margin:20px auto; width:440px;} 
.img-scroll .prev,.img-scroll .next { position:absolute; display:block; width:50px; height:100px; background-color:#000; 
top:0; color:#FFF; text-align:center; line-height:100px} 
.img-scroll .prev { left:0} 
.img-scroll .next { right:0} 
.img-list { position:relative; width:320px; height:100px; margin-left:60px; overflow:hidden} 
.img-list ul { width:9999px;} 
.img-list li { float:left; display:inline; width:100px; margin-right:10px; height:100px; background-color:#BDBDDF; text-align:center; line-height:100px;} 
</style> 
</head> 

<body> 
<div class="img-scroll"> 
<span class="prev">prev</span> 
<span class="next">next</span> 
<div class="img-list"> 
<ul> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
</ul> 
</div> 
</div> 
<script type="text/javascript"> 
function DY_scroll(wraper,prev,next,img,speed,or) 
{ 
var wraper = $(wraper); 
var prev = $(prev); 
var next = $(next); 
var img = $(img).find('ul'); 
var w = img.find('li').outerWidth(true); 
var s = speed; 
next.click(function() 
{ 
img.animate({'margin-left':-w},function() 
{ 
img.find('li').eq(0).appendTo(img); 
img.css({'margin-left':0}); 
}); 
}); 
prev.click(function() 
{ 
img.find('li:last').prependTo(img); 
img.css({'margin-left':-w}); 
img.animate({'margin-left':0}); 
}); 
if (or == true) 
{ 
ad = setInterval(function() { next.click();},s*1000); 
wraper.hover(function(){clearInterval(ad);},function(){ad = setInterval(function() { next.click();},s*1000);}); 

} 
} 
DY_scroll('.img-scroll','.prev','.next','.img-list',3,false); 
</script> 

</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

javascript禁止超鏈接跳轉(zhuǎn)的方法
這篇文章主要介紹了javascript禁止超鏈接跳轉(zhuǎn)的方法,結(jié)合實(shí)例分析了JavaScript事件機(jī)制與鼠標(biāo)事件的響應(yīng)操作技巧,需要的朋友可以參考下
2016-02-02
7道關(guān)于JS this的面試題，你能答對幾個
這篇文章主要給大家介紹了7道關(guān)于JS this的面試題，來看看你能答對幾個，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
js輸入中文效果
js輸入中文效果...
2006-09-09
Bootstrap Table 雙擊、單擊行獲取該行及全表內(nèi)容
這篇文章主要介紹了Bootstrap Table 雙擊、單擊行獲取該行內(nèi)容及獲取全表的內(nèi)容,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-08-08
Javascript中Null和undefined的簡單理解
在JavaScript中存在這樣兩種原始類型:Null與Undefined,這兩種類型常常會使JavaScript的開發(fā)人員產(chǎn)生疑惑,在什么時候是Null,什么時候又是Undefined,下面這篇文章主要給大家介紹了關(guān)于Javascript中Null和undefined的相關(guān)資料,需要的朋友可以參考下
2022-04-04
基于JS實(shí)現(xiàn)頁面視頻video標(biāo)簽禁止下載(下載按鈕+右擊菜單)
最近做項(xiàng)目遇到這樣的需求,禁止用戶瀏覽頁面的時候下載頁面的視頻,網(wǎng)上看到下載視頻的方法有兩種,本文對每種方法做詳細(xì)分析,對js禁止下載視頻相關(guān)知識感興趣的朋友一起看看吧
2024-02-02
淺談Webpack4 plugins 實(shí)現(xiàn)原理
在wabpack 核心功能除了loader應(yīng)該就是plugins插件了，本文主要介紹了Webpack4 plugins 實(shí)現(xiàn)原理，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
Svelte框架實(shí)現(xiàn)表格協(xié)同文檔的示例
本文主要介紹了Svelte框架實(shí)現(xiàn)表格協(xié)同文檔的示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-01-01
微信小程序?qū)崿F(xiàn)滾動消息通知
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)滾動消息通知，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-02-02
用javascript關(guān)閉本窗口技巧小結(jié)
window.close()是用來關(guān)閉窗口的，而且ie和firefox都是支持的，下面通過示例為大家介紹下用javascript關(guān)閉本窗口
2014-09-09