如何使用jQuery制作Web图片轮播效果

本篇内容主要讲解“如何使用Jquery制作WEB图片轮播效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何使用jQuery制作Web图片轮播效果”吧!

jquery提供了丰富的选择器以及用来挑选元素的方法，这极大的简化了我们的开发，例如$(".slider-item").filter(".slider-item-selected")选择了当前处于激活状态的索引按钮。
两张轮播图的切换显示效果是通过jquery的fadeOut()和fadeIn()方法来实现的，具体的使用参照jquery的api；
CSS透明背景的实现：  background: rgba(0, 0, 0, 0.2);filter: progid:DXImageTransfORM.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); 兼容大部分主流浏览器包括IE；为什么不使用opacity呢？因为opacity会使文字也透明（子元素也会透明）。
html骨架很重要，你写的html的结果应该是良好的。

代码部分：

HTML:

<pre name="code" class="html"><div class="slider"> <div class="slider-extra"> <ul class="slider-nav">  <li class="slider-item">1</li>  <li class="slider-item">2</li>  <li class="slider-item">3</li>  <li class="slider-item">4</li> </ul> <div class="slider-page">  <a class="slider-pre" href="javascript:;;"><</a>  <a class="slider-next" href="javascript:;;">></a> </div> </div></div>

CSS:

* { padding: 0px; margin: 0px;}a { text-decoration: none;}ul { list-style: outside none none;}.slider, .slider-panel img, .slider-extra { width: 650px; height: 413px;}.slider { text-align: center; margin: 30px auto; position: relative;}.slider-panel, .slider-nav, .slider-pre, .slider-next { position: absolute; z-index: 8;}.slider-panel { position: absolute;}.slider-panel img { border: none;}.slider-extra { position: relative;}.slider-nav { margin-left: -51px; position: absolute; left: 50%; bottom: 4px;}.slider-nav li { background: #3e3e3e; border-radius: 50%; color: #fff; cursor: pointer; margin: 0 2px; overflow: hidden; text-align: center; display: inline-block; height: 18px; line-height: 18px; width: 18px;}.slider-nav .slider-item-selected { background: blue;}.slider-page a{ background: rgba(0, 0, 0, 0.2); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); color: #fff; text-align: center; display: block; font-family: "simsun"; font-size: 22px; width: 28px; height: 62px; line-height: 62px; margin-top: -31px; position: absolute; top: 50%;}.slider-page a:HOVER { background: rgba(0, 0, 0, 0.4); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);}.slider-next { left: 100%; margin-left: -28px;}

JavaScript：

$(document).ready(function() { var length, currentIndex = 0, interval, hasStarted = false, //是否已经开始轮播 t = 3000; //轮播时间间隔 length = $('.slider-panel').length;  //将除了第一张图片隐藏 $('.slider-panel:not(:first)').hide(); //将第一个slider-item设为激活状态 $('.slider-item:first').addClass('slider-item-selected'); //隐藏向前、向后翻按钮 $('.slider-page').hide();  //鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动 $('.slider-panel, .slider-pre, .slider-next').hover(function() { stop(); $('.slider-page').show(); }, function() { $('.slider-page').hide(); start(); });  $('.slider-item').hover(function(e) { stop(); var preIndex = $(".slider-item").filter(".slider-item-selected").index(); currentIndex = $(this).index(); play(preIndex, currentIndex); }, function() { start(); });  $('.slider-pre').unbind('click'); $('.slider-pre').bind('click', function() { pre(); }); $('.slider-next').unbind('click'); $('.slider-next').bind('click', function() { next(); });   function pre() { var preIndex = currentIndex; currentIndex = (--currentIndex + length) % length; play(preIndex, currentIndex); }  function next() { var preIndex = currentIndex; currentIndex = ++currentIndex % length; play(preIndex, currentIndex); }  function play(preIndex, currentIndex) { $('.slider-panel').eq(preIndex).fadeOut(500)  .parent().children().eq(currentIndex).fadeIn(1000); $('.slider-item').removeClass('slider-item-selected'); $('.slider-item').eq(currentIndex).addClass('slider-item-selected'); }   function start() { if(!hasStarted) {  hasStarted = true;  interval = setInterval(next, t); } }  function stop() { clearInterval(interval); hasStarted = false; }  //开始轮播 start();});

首先是初始化部分：将除了第一张轮播图片意外的图片都隐藏，并且隐藏向前、向后按钮，使第一个索引按钮处于激活状态。
事件部分：通过jquery的hover()绑定鼠标上悬以及离开时的事件处理， jquery的bind()方法绑定鼠标点击事件处理向前、向后翻动、
轮播控制：pre(), next(), play(), start()开始自动轮播，stop()停止自动轮播。
上面的js写的比较散，结构也不太好，读起来也比较费力，也不易使用，耦合度较高。下篇将给出一个纯粹的jquery轮播插件， 该插件可以定制各种效果，方便的配置以及可扩展。

下面是整体的代码：
index.html

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jquery轮播效果图 - by RiccioZhang</title><script type="text/javascript" src="scripts/jquery-1.9.1.js"></script><style type="text/css"> * { padding: 0px; margin: 0px; } a { text-decoration: none; } ul { list-style: outside none none; } .slider, .slider-panel img, .slider-extra { width: 650px; height: 413px; } .slider { text-align: center; margin: 30px auto; position: relative; } .slider-panel, .slider-nav, .slider-pre, .slider-next { position: absolute; z-index: 8; } .slider-panel { position: absolute; } .slider-panel img { border: none; } .slider-extra { position: relative; } .slider-nav { margin-left: -51px; position: absolute; left: 50%; bottom: 4px; } .slider-nav li { background: #3e3e3e; border-radius: 50%; color: #fff; cursor: pointer; margin: 0 2px; overflow: hidden; text-align: center; display: inline-block; height: 18px; line-height: 18px; width: 18px; } .slider-nav .slider-item-selected { background: blue; } .slider-page a{ background: rgba(0, 0, 0, 0.2); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); color: #fff; text-align: center; display: block; font-family: "simsun"; font-size: 22px; width: 28px; height: 62px; line-height: 62px; margin-top: -31px; position: absolute; top: 50%; } .slider-page a:HOVER { background: rgba(0, 0, 0, 0.4); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); } .slider-next { left: 100%; margin-left: -28px; }</style><script type="text/javascript"> $(document).ready(function() { var length,  currentIndex = 0,  interval,  hasStarted = false, //是否已经开始轮播  t = 3000; //轮播时间间隔 length = $('.slider-panel').length;  //将除了第一张图片隐藏 $('.slider-panel:not(:first)').hide(); //将第一个slider-item设为激活状态 $('.slider-item:first').addClass('slider-item-selected'); //隐藏向前、向后翻按钮 $('.slider-page').hide();  //鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动 $('.slider-panel, .slider-pre, .slider-next').hover(function() {  stop();  $('.slider-page').show(); }, function() {  $('.slider-page').hide();  start(); });  $('.slider-item').hover(function(e) {  stop();  var preIndex = $(".slider-item").filter(".slider-item-selected").index();  currentIndex = $(this).index();  play(preIndex, currentIndex); }, function() {  start(); });  $('.slider-pre').unbind('click'); $('.slider-pre').bind('click', function() {  pre(); }); $('.slider-next').unbind('click'); $('.slider-next').bind('click', function() {  next(); });   function pre() {  var preIndex = currentIndex;  currentIndex = (--currentIndex + length) % length;  play(preIndex, currentIndex); }  function next() {  var preIndex = currentIndex;  currentIndex = ++currentIndex % length;  play(preIndex, currentIndex); }  function play(preIndex, currentIndex) {  $('.slider-panel').eq(preIndex).fadeOut(500)  .parent().children().eq(currentIndex).fadeIn(1000);  $('.slider-item').removeClass('slider-item-selected');  $('.slider-item').eq(currentIndex).addClass('slider-item-selected'); }   function start() {  if(!hasStarted) {  hasStarted = true;  interval = setInterval(next, t);  } }  function stop() {  clearInterval(interval);  hasStarted = false; }  //开始轮播 start(); });</script></head><body> <div class="slider"> <div class="slider-extra">  <ul class="slider-nav">  <li class="slider-item">1</li>  <li class="slider-item">2</li>  <li class="slider-item">3</li>  <li class="slider-item">4</li>  </ul>  <div class="slider-page">  <a class="slider-pre" href="javascript:;;"><</a>  <a class="slider-next" href="javascript:;;">></a>  </div> </div> </div></body></html>

至此一个简单的jquery轮播效果就完成了，当然还有很多需要改进的地方。

使用插件实现
上面的效果看起来还令人满意，唯一不足的就是：每次需要轮播效果时，要将代码复制粘贴过去，如果有些部分需要修改（例如：轮播时的动画效果，前一篇使用的是jquery的淡入淡出效果，如果改成滑动效果，不可避免的要修改js代码），那么就需要对js代码进行修改，对我所写的jquery轮播效果的js代码不熟悉的程序员来说，修改这些js确实很困难。轮播插件所要实现的目标之一就是插件可以灵活配置（不光只是本篇文章的插件），程序员只需要写少量的代码就可以实现丰富的功能，这当然是一件很好的事情。
嗯，我们来看代码：

(function($, window, document) {   //---- Statics   var DEFAULT_ANIMATE_TYPE = 'fade',      ARRAY_SLICE = [].slice,     ARRAY_CONCAT = [].concat     ;      //---- Methods   function concatArray() {     var deep = false,       result = [];     if(arguments.length > 0 &&          arguments[arguments.length - 1] === true) {       deep = true;     }     for(var i = 0; i < arguments.length; i++) {       if(!!arguments[i].length) {         if(deep) {           for(var j = 0; j < arguments[i].length; j++) {             //recursive call             result = ARRAY_CONCAT.call(result,                  concatArray(arguments[i][j], true));           }         } else {           result = ARRAY_CONCAT.call(result, arguments[i]);         }       } else if(i != arguments.length - 1 ||            (arguments[arguments.length - 1] !== true &&               arguments[arguments.length - 1] !== false)) {         result.push(arguments[i]);       }     }     return result;   }    //----- Core   $.fn.extend({     zslider: function(zsliderSetting, autoStart) {       var itemLenght = 0,         currItemIndex = 0,         started = false,         oInterval = {},         setting = {           intervalTime: 3000,           step: 1,           imagePanels: $(),           animateConfig: {             atype: 'fade',             fadeInSpeed: 500,             fadeOutSpeed: 1000           },           panelHoverStop: true,           ctrlItems: $(),           ctrlIteMactivateType: 'hover' || 'click',           ctrlItemHoverCls: '',           flipBtn: {},           panelHoverShowFlipBtn: true,           callbacks: {             animate: null           }         },         that = this         ;              //core methods       var slider = {           pre: function() {             var toIndex = itemLenght +                (currItemIndex - setting.step) % itemLenght;             slider.to(toIndex);           },           next: function() {             var toIndex = (currItemIndex + setting.step) % itemLenght;             slider.to(toIndex);           },           to: function(toIndex) {             //handle the index value             if(typeof toIndex === 'function') {               toIndex = toIndex.call(that, concatArray(setting.imagePanels, true),                      concatArray(setting.ctrlItems, true),                       currItemIndex, step);             }             if(window.isNaN(toIndex)) {               toIndex = 0;             }             toIndex = Math.round(+toIndex) % itemLenght;             if(toIndex < 0) {               toIndex = itemLenght + toIndex;             }                          var currentPanel = setting.imagePanels.eq(currItemIndex),             toPanel = setting.imagePanels.eq(toIndex),             currrntCtrlItem = setting.ctrlItems.eq(currItemIndex)             toCtrlItem = setting.ctrlItems.eq(toIndex)             ;             if(!setting.callbacks.animate ||                  setting.callbacks.animate.call(that,                      concatArray(setting.imagePanels, true),                        concatArray(setting.ctrlItems, true),                         currItemIndex, toIndex) === true) {               currrntCtrlItem.removeClass(setting.ctrlItemHoverCls);               toCtrlItem.addClass(setting.ctrlItemHoverCls);                              toPanel.fadeIn(setting.animateConfig.fadeInSpeed);               currentPanel.fadeOut(setting.animateConfig.fadeOutSpeed);             }                          //set the current item index             currItemIndex = toIndex;           },           start: function() {             if(!started) {               started = true;               oInterval =                  window.setInterval(slider.next, setting.intervalTime);             }           },           stop: function() {             if(started) {               started = false;               window.clearInterval(oInterval);             }           },           isStarted: function() {             return started;           }       };       function initData() {         if(zsliderSetting) {           var temp_callbacks = zsliderSetting.callbacks;                      $.extend(setting, zsliderSetting);           $.extend(setting.callbacks, temp_callbacks);                      itemLenght = setting.imagePanels.length;         }         //convert to the jquery object         setting.imagePanels = $(setting.imagePanels);         setting.ctrlItems = $(setting.ctrlItems);         setting.flipBtn.container = $(setting.flipBtn.container);         setting.flipBtn.preBtn = $(setting.flipBtn.preBtn);         setting.flipBtn.nextBtn = $(setting.flipBtn.nextBtn);       }       function initLook() {         //show the first image panel and hide other         setting.imagePanels.hide();         setting.imagePanels.filter(':first').show();         //activate the first control item and deactivate other         setting.ctrlItems.removeClass(setting.ctrlItemHoverCls);         setting.ctrlItems.filter(':first').addClass(setting.ctrlItemHoverCls);         $(that).css('overflow', 'hidden');         if(setting.panelHoverShowFlipBtn) {           showFlipBtn(false);         }       }       function initEvent() {         $(concatArray(setting.imagePanels,              setting.flipBtn.preBtn, setting.flipBtn.nextBtn, true)).hover(function() {           if(setting.panelHoverStop) {             slider.stop();           }           if(setting.panelHoverShowFlipBtn) {             showFlipBtn(true);           }         }, function() {           slider.start();           if(setting.panelHoverShowFlipBtn) {             showFlipBtn(false);           }         });         if(setting.ctrlItemActivateType === 'click') {           setting.ctrlItems.unbind('click');           setting.ctrlItems.bind('click', function() {             slider.to($(this).index());           });         } else {           setting.ctrlItems.hover(function() {             slider.stop();             slider.to($(this).index());           }, function() {             slider.start();           });         }         setting.flipBtn.preBtn.unbind('click');         setting.flipBtn.preBtn.bind('click', function() {           slider.pre();         });         setting.flipBtn.nextBtn.unbind('click');         setting.flipBtn.nextBtn.bind('click', function() {           slider.next();         });       }       function init() {         initData();                  initLook();                  initEvent();       }              function showFlipBtn(show) {         var hasContainer = setting.flipBtn.container.length > 0,           eles;         eles = hasContainer ? setting.flipBtn.container :           //to the dom array:                      concatArray(setting.flipBtn.preBtn,                    setting.flipBtn.nextBtn, true);         if(show) {           $(eles).show();         } else {           $(eles).hide();         }       }              init();       if(arguments.length < 2 || !!autoStart){         slider.start();       }       return slider;     }   }); })(jQuery, window, document);

到此，相信大家对“如何使用jQuery制作Web图片轮播效果”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！