本篇內(nèi)容主要講解“jQuery怎么實現(xiàn)加載輪播圖”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“jQuery怎么實現(xiàn)加載輪播圖”吧!

成都創(chuàng)新互聯(lián)主要從事成都網(wǎng)站制作、成都網(wǎng)站設(shè)計、外貿(mào)營銷網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)泗陽,十余年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220

引言

關(guān)于幻燈輪播圖，想必大家都不陌生，尤其是基于 jQuery 的，插件、代碼網(wǎng)上一搜一大堆，但是真正符合自己需求的幾乎沒有，所以我要打造一個符合自身需求，經(jīng)得起廣大網(wǎng)民考驗的 jQuery 輪播圖！

思路

為什么說網(wǎng)上其他一些輪播圖不符合我的要求？我的需求又是什么呢？

現(xiàn)在網(wǎng)上可以找到的多數(shù)幻燈輪播圖的 jQuery 插件的作法是，先把圖片和鏈接的 HTML 寫好，然后控制隱藏和顯示來輪流展示當(dāng)前的幻燈圖片。但是對用戶而言，我們始終只是看到當(dāng)前的一張圖片，那其他幾張隱藏的圖片為什么要事先加載進(jìn)來呢？這不是費時費力嗎？所以我的第一個需求是按需加載。

我們一般會把輪播圖放在首頁展示，但是首頁的重點內(nèi)容應(yīng)該是最近更新的文章，至少我不認(rèn)為圖片展示功能需要被搜索引擎收錄，所以我的第二個需求是符合 SEO。

實現(xiàn)

沖著以上兩個需求，我做了一個 DEMO ，大家不妨看看這個 DEMO 的源代碼，發(fā)現(xiàn)區(qū)別了嗎？是的，在這個 DEMO 的 HTML 源代碼中，你看不到任何的圖片和相關(guān)信息，都由 JS 載入進(jìn)來的，也就是說爬蟲爬不到，而且是隨著圖片的切換，一張一張地載入當(dāng)前的幻燈圖片。

這里我就只分享一下我的 JS 寫法，HTML 什么就請各位看源碼吧，代碼我就不一一細(xì)說了，注釋也都寫得很明白了。

$(function() {
  var WangeSlide = (function() {
    //配置
    var config = {
      //輪播圖尺寸
      width : 960,
      height : 350,
      //是否自動切換
      autoSwitch : true,
      //自動切換間隔時間（毫秒）
      interval : 6000,
      //輪播圖圖片路徑
      picPath : 'http://www.dowebok.com/demo/2014/93/img/',
      //輪播圖圖片信息：圖片文件名 / 圖片標(biāo)題 / 圖片指向鏈接
      picInfo : [
        ['fullimage1.jpg', '圖片1提示','http://codepen.io/webstermobile/'],
        ['fullimage1.jpg', '圖片2提示','http://codepen.io/webstermobile/'],
        ['fullimage1.jpg', '圖片3提示','http://codepen.io/webstermobile/']
      ]
    };
    //獲取圖片信息
    /**
     * @param index 圖片所在的索引值
    **/
    var getImgInfo = function(index) {
      var imgSrc = config.picPath + config.picInfo[index][0],
        imgAlt = config.picInfo[index][3],
        imgUrl = config.picInfo[index][4],
        imgId = 'slide_' + (index+1).toString(),
        imgHtml = '' +
              '  ' +
              '    ' +
              '  ' +
            '',
        slideTextHtml = '' + imgAlt+ '';
      return {
        imgAlt : imgAlt,
        imgUrl : imgUrl,
        imgHtml : imgHtml,
        slideTextHtml : slideTextHtml
      }
    };
    //圖片完全加載后緩慢加載顯示
    var fadeInImg = function(el, speed) {
      //console.log(el)
      el.find("img").load(function() {
        el.find("img").addClass("loaded")
        el.fadeIn(speed)
      });
    };
    //圖片切換
    /**
     * @param index 圖片所在的索引值
     * @param triggerCurEl 當(dāng)前觸發(fā)節(jié)點元素
    **/
    var imgSwitch = function(index, triggerCurEl) {
      var slideId = 'slide_' + (index+1).toString(),
        slideIdEl = document.getElementById(slideId);
      if (slideIdEl) {
        //如果已有對應(yīng)的元素，則顯示已有元素
        var panelLi = $('#panel ul li');
        panelLi.hide();
        $(slideIdEl).fadeIn('slow');
      } else {
        //如果還沒有對應(yīng)的元素，則注入元素
        $(getImgInfo(index).imgHtml).appendTo($('#panel ul'));
        var panelLi = $('#panel ul li');
        panelLi.hide();
        //載入顯示圖片
        fadeInImg($("#" +slideId), 'slow');
      }
      //獲取圖片的 alt 作為顯示信息
      $('#slide_text').html(getImgInfo(index).slideTextHtml);
      //當(dāng)前狀態(tài) cur
      $('#trigger ul li').removeClass('cur');
      triggerCurEl.addClass('cur');
    };
    //輪播圖
    var slide = function() {
      //設(shè)置輪播圖尺寸
      $('#panel').css({
        'width' : config.width + 'px',
        'height' : config.height + 'px'
      });
      var result = getImgInfo(0).imgHtml
      //初使化輪播圖，只加載第一張圖片信息
      $('#panel ul').html($(result));
      //載入顯示圖片
      fadeInImg($('#slide_1'), 500);
      //注入背景層 + 觸發(fā)器容器 + 輪播圖文字容器
      var slideBg = '