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