使用jQuery制作基础的Web图片轮播效果


Posted in Javascript onApril 22, 2016

首先看一下效果:

使用jQuery制作基础的Web图片轮播效果

就这么个意思,没截动图哈~

轮播效果分析:
轮播效果大致可以分为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" 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);
 }
 /**
 * 从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 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确实很困难。轮播插件所要实现的目标之一就是插件可以灵活配置(不光只是本篇文章的插件),程序员只需要写少量的代码就可以实现丰富的功能,这当然是一件很好的事情。本篇文章的轮播插件的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);
Javascript 相关文章推荐
基于jquery封装的一个js分页
Nov 15 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 Javascript
Node.js文件操作方法汇总
Mar 22 Javascript
JS随机洗牌算法之数组随机排序
Mar 23 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
May 19 Javascript
微信小程序 实战小程序实例
Oct 08 Javascript
AngularJS控制器之间的通信方式详解
Nov 03 Javascript
基于JavaScript实现窗口拖动效果
Jan 18 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 Javascript
vue使用video插件vue-video-player的示例
Oct 03 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 #Javascript
jQuery 监控键盘一段时间没输入
Apr 22 #Javascript
基于jquery实现轮播特效
Apr 22 #Javascript
jquery插件Jplayer使用方法简析
Apr 22 #Javascript
jQuery点击其他地方时菜单消失的实现方法
Apr 22 #Javascript
JS验证逗号隔开可以是中文字母数字
Apr 22 #Javascript
JS简单循环遍历json数组的方法
Apr 22 #Javascript
You might like
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
PHP递归获取目录内所有文件的实现方法
2016/11/01 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
写自已的js类库需要的核心代码
2012/07/16 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
JQuery自适应窗口大小导航菜单附源码下载
2015/09/01 Javascript
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
python复制文件代码实现
2013/12/23 Python
详解Python中的循环语句的用法
2015/04/09 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
如何使用Python的Requests包实现模拟登陆
2018/04/27 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
浅谈python新式类和旧式类区别
2019/04/26 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
Matplotlib自定义坐标轴刻度的实现示例
2020/06/18 Python
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
电气专业推荐信范文
2013/11/18 职场文书
大型会议接待方案
2014/03/01 职场文书
政法干警核心价值观心得体会
2014/09/11 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
2014年置业顾问工作总结
2014/11/17 职场文书
2015年七一建党节慰问信
2015/03/23 职场文书
运动会1000米加油稿
2015/07/21 职场文书
2015年入党积极分子培养考察意见
2015/08/12 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书
MySQL 百万级数据的4种查询优化方式
2021/06/07 MySQL