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)畫時(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)畫
    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)容了，希望大家能夠喜歡。

您可能感興趣的文章:

相關(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ù)庫表test，并插入一些測(cè)試數(shù)據(jù)接下來建立一個(gè)html文件，感興趣的朋友可以參考下哈，希望您可以幫助到你
2013-03-03
讀jQuery之八包裝事件對(duì)象
由于各個(gè)瀏覽器中原生事件對(duì)象的差異性，多數(shù) JS庫/框架都或多或少的對(duì)原生事件對(duì)象進(jìn)行了修復(fù)及包裝。
2011-06-06
使用異步controller與jQuery實(shí)現(xiàn)卷簾式分頁
這篇文章主要介紹了使用異步controller與jQuery實(shí)現(xiàn)卷簾式分頁，使用異步controller與jQuery按需加載內(nèi)容，當(dāng)用戶開始通過網(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頁面元素及相關(guān)樣式屬性操作技巧,需要的朋友可以參考下
2016-06-06
源碼解讀jQ中瀏覽器兼容模塊support
jquery support主要是檢測(cè)瀏覽器兼容性，支持力度的方法，用于展示不同瀏覽器各自特性和bug的屬性集合。作為一個(gè)靜態(tài)成員，提供給jquery內(nèi)部函數(shù)，告訴他們某些功能是否能用。避免了以往通過檢測(cè)瀏覽器版本做修改。下面我們通過源碼詳細(xì)解讀jQ中瀏覽器兼容模塊support。
2016-08-08
select標(biāo)簽?zāi)M/美化方法采用JS插件
select標(biāo)簽的外觀問題很惱人，各個(gè)瀏覽器都不一致，單單就IE，一個(gè)版本就一個(gè)長(zhǎng)相，還不能用CSS修飾，接下來將本人對(duì)select的美化方法共享出來，感興趣的朋友可以參考下
2013-04-04
jQuery版仿Path菜單效果
昨日在一個(gè)前端網(wǎng)站上看見了一個(gè)老外寫的純用css3做的仿Path菜單，心里癢癢，于是也用jQuery寫了一個(gè)，現(xiàn)在分享給大家
2011-12-12
jquery 無限極下拉菜單的簡(jiǎn)單實(shí)例(精簡(jiǎn)濃縮版)
下面小編就為大家?guī)硪黄猨query 無限極下拉菜單的簡(jiǎn)單實(shí)例(精簡(jiǎn)濃縮版)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
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)常需要用到的，下面為大家介紹下具體的實(shí)現(xiàn)，感興趣的朋友可以參考下哈
2013-06-06