欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

相關(guān)文章

最新評(píng)論