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

前端之家收集整理的这篇文章主要介绍了使用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="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a>图 - by RiccioZhang
  • 至此一个简单的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);

    原文链接:https://www.f2er.com/jquery/49199.html

    猜你在找的jQuery相关文章