小編給大家分享一下jquery如何實現(xiàn)輪播圖，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序定制開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了仁壽免費建站歡迎大家使用！

jquery輪播圖的實現(xiàn)方法：首先創(chuàng)建一個放置的盒子“p.focus”；然后將overflow設(shè)置為hidden；接著通過javascript實現(xiàn)點擊左右翻頁切換圖片的功能即可。

jQuery實現(xiàn)輪播圖效果

許多電商網(wǎng)站或者門戶網(wǎng)站上都會有一個焦點圖自動輪播的廣告，下面將親自用jQuery實現(xiàn)一個這個效果。

主要有三個功能需要實現(xiàn)：
1. 點擊左右翻頁，會切換圖片
2. 點擊下方導(dǎo)航按鈕，會顯示該位置上的圖片
3. 鼠標移出所在區(qū)域，左右翻頁按鈕消失，圖片自動輪播

HTML編寫

首先需要一個放置的盒子p.focus，這個盒子的寬度和高度應(yīng)該和每一張圖片大小保持一致，同時要將overflow設(shè)置為hidden。放圖片的寬度為所有圖片的總寬度，通過改變盒子的left屬性來實現(xiàn)圖片的切換。由于在點擊到最后一張圖片時再點下一張需要跳轉(zhuǎn)到第一張圖片實現(xiàn)無限滾動的效果，所以在一頭一尾分別再添加一張圖片。


可以看到如果將p.focus的overflow屬性注釋掉以后，圖片時平鋪在整個頁面上的。

CSS編寫

由于需要改變圖片的left屬性，所以要將其position設(shè)置為absolute。左右翻頁按鈕再鼠標移動到上面時，改變它的透明度。

JavaScript編寫

首先要實現(xiàn)點擊左右翻頁切換圖片的功能

一張圖片寬度為480px,所以在點擊右側(cè)箭頭的時候應(yīng)該將圖片向左移動480px，就是left要減480px，而點擊左側(cè)箭頭的時候left加480px；同時在圖片由最后一張切換到第一張的時候要將left的值重置為-480px，由第一張切換到最后一張的時候?qū)eft的值重置為-2880px，這樣就造成了可以無限循環(huán)的錯覺。

 /**
  * 這個函數(shù)用于移動圖片，接收一個移動參數(shù)
  * @param dis為需要移動的距離
  */
  function move(dis){
    moving = true;    let $picture = $(".picture");    let left = parseInt($picture.css("left"));
    left += dis;
    $picture.animate({left:left},400,"linear",function(){
      if(left > -480){
        left = -2880;
      }      if(left < -2880){
        left = -480;
      }
      $picture.css("left",left + "px");
      moving = false;
    });
  }

接下來是下方的導(dǎo)航按鈕，點擊時會自動切換到對應(yīng)的圖片上，同時被點擊的按鈕還會高亮。

 /**
  * 這個函數(shù)是用于點亮下方的幾個小按鈕的
  */
  function activeBtn(){
    if(index < 1){
      index = 6;
    }    if(index > 6){
      index = 1;
    }    let $cur_active = $(".button-group").find(".active");    if($cur_active.attr("index") !== index){
      $cur_active.removeClass("active");
      $(".button-group").find('[index=' + index+']').addClass("active");
    }
  }

最后是自動輪播函數(shù)的編寫，這個函數(shù)需要定時執(zhí)行上面的兩個函數(shù)

 /**
  * 實現(xiàn)焦點圖自動輪播
  */
  function autoMove(){
    index += 1;
    activeBtn();
    move(-480);
    timeoutId = setTimeout(autoMove,5000);
  }

下面是關(guān)于其他事件綁定的代碼

let index = 1;//當(dāng)前為第幾張圖片
  let timeoutId;  let moving = false;
  timeoutId = setTimeout(autoMove,5000);  //為左右翻頁添加點擊事件
  $("#left").click(function(event){
    event.preventDefault();    if(!moving){
      index -= 1;
      activeBtn();
      move(480);
    }
  });
  $("#right").click(function(event){
    event.preventDefault();    if(!moving){
      index += 1;
      activeBtn();
      move(-480);
    }
  });  //為下方按鈕添加點擊事件
  $(".button-group").click(function(event){
    let $target = $(event.target);    if($target.is("span")){      if(!moving){        let cur_index = parseInt($(this).find(".active").attr("index"));
        index = parseInt($target.attr("index"));
        activeBtn();
        move(-480 * (index - cur_index));
      }
    }
  });
  $(".focus").mouseenter(function(event){
    $(".arrow").css("visibility","visible");
    clearTimeout(timeoutId);//取消自動輪播
  })
  .mouseleave(function(event){
    $(".arrow").css("visibility","hidden");
    timeoutId = setTimeout(autoMove,5000);//重新設(shè)置自動輪播
  })

在其中有一些需要特別注意的地方：
1. 移動圖片過后要判斷l(xiāng)eft值是否超出了預(yù)期值，超出過后要重置
2. 通過.attr(“index”)取得的index值是一個字符串，需要將它轉(zhuǎn)換成整數(shù)，否則在點擊下方導(dǎo)航按鈕的時候會出錯
3. 圖片在移動時要將moving設(shè)置為true讓其他按鈕不能再點擊，移動完成后重置為false

看完了這篇文章，相信你對jquery如何實現(xiàn)輪播圖有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

分享文章：jquery如何實現(xiàn)輪播圖
URL分享：http://www.chinadenli.net/article38/pecisp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、微信小程序、網(wǎng)站改版、虛擬主機、商城網(wǎng)站、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)