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è)定
相關(guān)文章
本篇文章主要是對JQuery+Ajax無刷新分頁的實例代碼進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
在群里看見有人貼出一個頁面問opacity不支持IE6，有什么好的支持方法沒。貼出第一眼就發(fā)現(xiàn)用了jq庫，當(dāng)場就想到了支持的。 但很多人回答用CSS濾鏡，當(dāng)我看到這個答案的時候。有些很吃驚。難道大家都不知道JQ是支持opacity兼容IE6+的嗎？ 開始他們都不相信。JQ怎么配合使用。于是就寫了一個簡單的代碼給他們。2013-03-03
基于zepto的移動端輕量級日期插件--date_picker
這篇文章主要介紹了基于zepto的移動端輕量級日期插件--date_picker,需要的朋友可以參考下2016-03-03
使用jQuery的ajax方法向服務(wù)器發(fā)出get和post請求的方法
這篇文章主要介紹了使用jQuery的ajax方法向服務(wù)器發(fā)出get和post請求的方法,需要的朋友可以參考下2017-01-01
jQuery Validation PlugIn的使用方法詳解
這篇文章主要介紹了jQuery Validation PlugIn的使用方法，需要的朋友可以參考下2015-12-12
jQuery.ajax()功能比較強大，可配置的參數(shù)比較多，本文主要對這個方法的注意事項進(jìn)行總結(jié)。有相同需求的童鞋們也來仔細(xì)看看吧，希望對大家能有所幫助2014-11-11
下面小編就為大家?guī)硪黄獪\談jquery中next與siblings的區(qū)別。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
下面小編就為大家?guī)硪黄猨query樹形菜單效果的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要為大家詳細(xì)介紹了jQuery圖片輪播實現(xiàn)并封裝,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
jQuery實現(xiàn)移動端下拉展現(xiàn)新的內(nèi)容回彈動畫
這篇文章主要介紹了jQuery實現(xiàn)移動端下拉展現(xiàn)新的內(nèi)容回彈動畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06