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