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

jQuery 前端之家
前端之家收集整理的这篇文章主要介绍了使用jQuery制作基础的Web图片轮播效果，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

首先看一下效果：

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

轮播效果分析： 轮播效果大致可以分为3个部分：轮播图片（图片或者是包含容器），控制轮播图显示的按钮（向左、向右按钮，索引按钮(例如上面效果图的顶部的数字按钮)），每隔一段时间轮流显示轮播图片。 轮播图的显示：要显示的轮播图显示，不需要显示的轮播图隐藏；通常将这些轮播图片以定位的方式重叠在一起，每次显示一张轮播图片。 控制按钮：鼠标点击或者移到索引按钮上面时，显示对应索引位置的轮播图；向上、向下按钮负责控制显示上一张、下一张轮播图片。 其它：一般索引按钮有激活状态和未激活状态共2种状态；鼠标移到轮播图片上面时应该停止自动轮播，鼠标离开时开始自动轮播。

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

代码部分：

HTML:

<div class="slider-extra">
<ul class="slider-nav">
<li class="slider-item">1
<li class="slider-item">2
<li class="slider-item">3
<li class="slider-item">4

CSS:

JavaScript：

//将除了第一张图片隐藏
$('.slider-panel:not(:first)').hide();
//将第一个slider-item设为激活状态
$('.slider-item:first').addClass('slider-item-selected');
//隐藏向前、向后翻按钮
$('.slider-page').hide();

//鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动
$('.slider-panel,.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

<Meta charset="UTF-8"> jquery轮播<a href="/tag/xiaoguo/" target="_blank" class="keywords">效果</a>图 - by RiccioZhang @H_404_48@

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

    使用插件实现

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

    //---- 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,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,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,true); 
    if(show) { 
      $(eles).show(); 
    } else { 
      $(eles).hide(); 
    } 
  } 

  init(); 
  if(arguments.length < 2 || !!autoStart){ 
    slider.start(); 
  } 
  return slider; 
}

    });
    })(jQuery,document);

    JavaScriptjQueryjs图片图片图片图片轮播轮播

    猜你在找的jQuery相关文章

    《锋利的jQuery》笔记：插件的使用和写法
    jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来，用于对通过选择器获取的...
    jQuery插件开发入门
    扩展jQuery插件和方法的作用是非常强大的，它可以节省大量开发时间。 入门 编写一个jQuery...
    jquery.roundabout.js实现3D图片层叠旋转木马切换
    最近项目中需要实现3D图片层叠旋转木马切换的效果，于是用到了jquery.roundabout.js。 兼容...
    jQuery效果之jQuery实现图片的依次加载图片
    css代码： js代码：
    jQuery之deferred对象详解
    一、什么是deferred对象？ 开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。...
    jQuery插件开发进阶
    jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的，有了模式，我们就能...
    jQuery 实现邮箱输入自动提示功能：（一）
    记得去年做某个项目的时候，用到了邮箱输入自动提示功能，于是网上搜了一下，发现了这个写...
    jQuery插件之上传文件ajaxfileupload.js源码与使用
    在网页应用中，一般会用到上传文件或者图片什么的到服务器，那么可以用ajaxfileupload.js，...
    jQuery效果之封装一个文章图片弹出放大效果
    首先先搭写一个基本的格式： 然后用自调用匿名函数包裹你的代码，将系统变量以变量形式传递...
    《从零开始学习jQuery》：用jQuery操作元素的属性与样式
    元素属性和Dom属性简介 对于下面这样一个标签元素: 我们通常将id,src,alt,class称为属性,也...
    HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
    关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作