网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 使用jQuery制作基础的Web图片轮播效果
内容
    这篇文章主要介绍了使用jQuery制作基础的Web图片轮播效果的实例,鼠标悬停时可停止而离开时可自动轮播,文中还介绍了一种使用zslider插件来实现的方法,比较犀利,需要的朋友可以参考下
    首先看一下效果：
    名单
    就这么个意思，没截动图哈~
    轮播效果分析：
    轮播效果大致可以分为3个部分：轮播图片（图片或者是包含容器），控制轮播图显示的按钮（向左、向右按钮，索引按钮(例如上面效果图的顶部的数字按钮)），每隔一段时间轮流显示轮播图片。
    轮播图的显示：要显示的轮播图显示，不需要显示的轮播图隐藏；通常将这些轮播图片以定位的方式重叠在一起，每次显示一张轮播图片。
    控制按钮：鼠标点击或者移到索引按钮上面时，显示对应索引位置的轮播图；向上、向下按钮负责控制显示上一张、下一张轮播图片。
    其它：一般索引按钮有激活状态和未激活状态共2种状态；鼠标移到轮播图片上面时应该停止自动轮播，鼠标离开时开始自动轮播。
    轮播效果实现笔记：
    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"><div>
     <div>
     <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
     </ul>
     <div>
      <a href="javascript:;;"><</a>
      <a 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);
     }
     /**
     * 从preIndex页翻到currentIndex页
     * 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);
     }
     /**
      * 从preIndex页翻到currentIndex页
      * 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>
     <div>
      <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      </ul>
      <div>
      <a href="javascript:;;"><</a>
      <a href="javascript:;;">></a>
      </div>
     </div>
     </div>
    </body>
    </html>
    至此一个简单的jquery轮播效果就完成了，当然还有很多需要改进的地方。
    使用插件实现
    上面的效果看起来还令人满意，唯一不足的就是：每次需要轮播效果时，要将代码复制粘贴过去，如果有些部分需要修改（例如：轮播时的动画效果，前一篇使用的是jquery的淡入淡出效果，如果改成滑动效果，不可避免的要修改js代码），那么就需要对js代码进行修改，对我所写的jquery轮播效果的js代码不熟悉的程序员来说，修改这些js确实很困难。轮播插件所要实现的目标之一就是插件可以灵活配置（不光只是本篇文章的插件），程序员只需要写少量的代码就可以实现丰富的功能，这当然是一件很好的事情。本篇文章的轮播插件的html和css部分需要程序员自己编写，而实现效果的js只需要少量的编写。
    这里我们使用到的zslider插件在GitHub上开源：
    github:https://github.com/ricciozhang/zslider_v1
    嗯，我们来看代码：
    (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: 
              /*ARRAY_CONCAT.call(ARRAY_SLICE.apply(setting.flipBtn.preBtn), 
                  ARRAY_SLICE.apply(setting.flipBtn.nextBtn));*/
              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); 
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/17 4:25:28