jQuery制作簡潔的圖片輪播效果
更新時間：2015年04月03日 16:34:18 投稿：hebedich
這篇文章主要介紹了jQuery制作簡潔的圖片輪播效果，代碼非常的精簡，小伙伴們可以自己美化下，自由擴(kuò)展。
演示圖：
核心代碼：
$(document).ready(function(){
var $iBox = $('.imgBox'),
$iNum = $('.imgNum'), //緩存優(yōu)化
indexImg = 1, //初始下標(biāo)
totalImg = 4, //圖片總數(shù)量
imgSize = 300, //圖片尺寸 寬度
moveTime = 1100, //切換動畫時間
setTime = 2500, //中間暫停時間
clc = null;
function moveImg(){
if(indexImg != totalImg){
$iBox.animate({
left: -(indexImg*imgSize) + 'px'
}, moveTime);
$iNum.removeClass('mark-color')
.eq(indexImg)
.addClass('mark-color');
indexImg++;
}
else{
indexImg = 1;
$iNum.removeClass('mark-color')
.eq(indexImg - 1)
.addClass('mark-color');
$iBox.animate({
left: 0
}, moveTime);
}
}
$iNum.hover(function(){
$iBox.stop(); //結(jié)束當(dāng)前動畫
clearInterval(clc); //暫停循環(huán)
$iNum.removeClass('mark-color');
$(this).addClass('mark-color');
indexImg = $(this).index();
$iBox.animate({
left: -(indexImg*imgSize) + 'px'
}, 500);
},function(){
clc = setInterval(moveImg, setTime);
});
clc = setInterval(moveImg, setTime);
});
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了jQuery實現(xiàn)tab選項卡效果的方法,實例分析了jquery實現(xiàn)tab選項卡切換效果的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
jQuery+.net實現(xiàn)瀏覽更多內(nèi)容(改編php版本)
改編自php版本這里記錄.net 下的實現(xiàn);首先創(chuàng)建數(shù)據(jù)庫表test，并插入一些測試數(shù)據(jù)接下來建立一個html文件，感興趣的朋友可以參考下哈，希望您可以幫助到你2013-03-03
由于各個瀏覽器中原生事件對象的 差異性 ，多數(shù) JS庫/框架 都或多或少的對原生事件對象進(jìn)行了修復(fù)及包裝。2011-06-06
使用異步controller與jQuery實現(xiàn)卷簾式分頁
這篇文章主要介紹了使用異步controller與jQuery實現(xiàn)卷簾式分頁，使用異步controller與jQuery按需加載內(nèi)容，當(dāng)用戶開始通過網(wǎng)站的內(nèi)容滾動時進(jìn)一步加載內(nèi)容。,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了jQuery實現(xiàn)右下角可縮放大小的層,以完整實例形式分析了jQuery頁面元素及相關(guān)樣式屬性操作技巧,需要的朋友可以參考下2016-06-06
jquery support主要是檢測瀏覽器兼容性，支持力度的方法，用于展示不同瀏覽器各自特性和bug的屬性集合。作為一個靜態(tài)成員，提供給jquery內(nèi)部函數(shù)，告訴他們某些功能是否能用。避免了以往通過檢測瀏覽器版本做修改。下面我們通過源碼詳細(xì)解讀jQ中瀏覽器兼容模塊support。2016-08-08
select標(biāo)簽?zāi)M/美化方法采用JS插件
select標(biāo)簽的外觀問題很惱人，各個瀏覽器都不一致，單單就IE，一個版本就一個長相，還不能用CSS修飾，接下來將本人對select的美化方法共享出來，感興趣的朋友可以參考下2013-04-04
昨日在一個前端網(wǎng)站上看見了一個老外寫的純用css3做的仿Path菜單，心里癢癢，于是也用jQuery寫了一個，現(xiàn)在分享給大家2011-12-12
下面小編就為大家?guī)硪黄猨query 無限極下拉菜單的簡單實例(精簡濃縮版)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
jquery點(diǎn)擊頁面任何區(qū)域?qū)崿F(xiàn)鼠標(biāo)焦點(diǎn)十字效果
鼠標(biāo)點(diǎn)擊聚焦，地圖定位，在圖片上突出顯示，焦點(diǎn)定位頁面元素，這些都是在系統(tǒng)開發(fā)是經(jīng)常需要用到的，下面為大家介紹下具體的實現(xiàn)，感興趣的朋友可以參考下哈2013-06-06