使用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 下拉列表 二级联动插件分享
Mar 29 Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
Angular2库初探
Mar 01 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
Dec 11 Javascript
微信小程序3种位置API的使用方法详解
Aug 05 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 Javascript
微信小程序国际化探索实现(附源码地址)
May 20 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
一些关于PHP的知识
2006/11/17 PHP
php+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
javascript之Partial Application学习
2013/01/10 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
jQuery判断元素是否显示 是否隐藏的简单实现代码
2016/05/19 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
ReactNative列表ListView的用法
2017/08/02 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
详解10分钟学会vue滚动行为
2017/09/21 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
Windows系统下多版本pip的共存问题详解
2017/10/10 Python
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
解决Django连接db遇到的问题
2019/08/29 Python
基于梯度爆炸的解决方法:clip gradient
2020/02/04 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
python如何实时获取tcpdump输出
2020/09/16 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
一文带你掌握Pyecharts地理数据可视化的方法
2021/02/06 Python
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
linux面试题参考答案(5)
2016/11/05 面试题
若干个Java基础面试题
2015/05/19 面试题
护士毕业实习感言
2014/03/05 职场文书
工作会议方案
2014/05/21 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
原生JS封装vue Tab切换效果
2021/04/28 Vue.js
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers