JQuery循環(huán)滾動圖片代碼
更新時間:2011年12月08日 23:19:46 作者:
每次滾動的長度不要固定死,可以直接獲取圖片寬度作為滾動的長度。這樣當(dāng)你的網(wǎng)站有很多地方需要這個效果的時候一個函數(shù)就可以搞定了
復(fù)制代碼 代碼如下:
function refresh() {
var s = $(".box1");
if (!s.is(":animated"))
$(".box1").animate({ marginLeft: "0px" }, "slow", function () {
$('.box1 img:first').before($('.box1 img:last'));
$(".box1").css("margin-left", "-206px");
});
}
<div class="frame"><div class="box1"><img src="img/001.png" alt="" /><img src="img/002.png" alt="" /><img src="img/003.png" alt="" /><img src="img/004.png" alt="" /></div></div>
<button type="button"><<</button><button type="button" onclick="refresh()">>></button>
.box1
{
width:1200px;
overflow:hidden;
margin-left:-206px;
}
.frame
{
width:620px;
overflow:hidden;
}
圖片寬度默認(rèn)206px,沒設(shè)定
您可能感興趣的文章:
- 多種JQuery循環(huán)滾動文字圖片效果代碼
- jQuery循環(huán)滾動展示代碼 可應(yīng)用到文字和圖片上
- 利用jQuery簡單實(shí)現(xiàn)產(chǎn)品展示圖片左右滾動功能(示例代碼)
- 基于jquery實(shí)現(xiàn)點(diǎn)擊左右按鈕圖片橫向滾動
- 基于jQuery的圖片左右無縫滾動插件
- jquery 單行滾動、批量多行滾動、文字圖片翻屏滾動效果代碼
- 基于jQuery圖片平滑連續(xù)滾動插件
- js jquery做的圖片連續(xù)滾動代碼
- jquery實(shí)現(xiàn)圖片左右間隔滾動特效(可自動播放)
- jQuery實(shí)現(xiàn)一組圖片循環(huán)滾動
相關(guān)文章
JQuery 進(jìn)入頁面默認(rèn)給已賦值的復(fù)選框打鉤
這篇文章主要介紹了JQuery 進(jìn)入頁面默認(rèn)給已賦值的復(fù)選框打鉤的實(shí)現(xiàn)代碼,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2017-03-03jQuery插件實(shí)現(xiàn)非常實(shí)用的tab欄切換功能【案例】
這篇文章主要介紹了jQuery插件實(shí)現(xiàn)非常實(shí)用的tab欄切換功能,涉及jQuery事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-02-02跟著JQuery API學(xué)Jquery 之三 篩選
跟著JQuery API學(xué)Jquery 之三 篩選,相當(dāng)于條件判斷類型。2010-04-04jQuery中toggleClass()方法用法實(shí)例
這篇文章主要介紹了jQuery中toggleClass()方法用法,實(shí)例分析了toggleClass()方法的功能、定義及對添加或移除匹配元素的一個或多個類進(jìn)行切換的使用技巧,需要的朋友可以參考下2015-01-01jquery 學(xué)習(xí)筆記 傳智博客佟老師附詳細(xì)注釋
本人水平有限,在學(xué)習(xí)時請用批判的態(tài)度學(xué)習(xí),有問題給我留言 傳智博客佟老師 jqurey 學(xué)習(xí)筆記,以及例子代碼詳細(xì)注釋。2009-07-07jQuery中DOM節(jié)點(diǎn)刪除之empty與remove
DOM節(jié)點(diǎn)刪除相信對每個初學(xué)jQuery的新手們來說都不陌生,下面這篇文章主要介紹了jQuery中DOM節(jié)點(diǎn)刪除之empty與remove的相關(guān)資料,有需要的朋友可以參考借鑒,感興趣的下面來一起學(xué)習(xí)學(xué)習(xí)吧。2017-01-01