jquery自定义banner图滚动插件---(解决最后一张图片倒回第一张图片的bug)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery自定义banner图滚动插件---(解决最后一张图片倒回第一张图片的bug)相关的知识,希望对你有一定的参考价值。

 

banner图的滚动效果动画

  最近做项目中banner滚动的时候遇到了一个小bug,当banner滚动到最后一张图再跳回第一张图时,

      会出现默认的倒回第一张图的过渡效果,看了几个插件都是这样,所以自定义了一个插件修改了一下,

       方便以后使用。

 

by一个刚上路的女码农

 

 有后退动画的banner效果如下


 

技术分享

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>jquery图片轮播</title>
<!-- jQuery Script -->
<style>
  *{padding: 0; margin: 0}
  .slider {
    position: relative;
    height: 400px;
    min-width: 1004px;
    width: 100%;
    overflow: hidden;
  }
  .slider .slider-pointer {
    position: absolute;
    bottom: 20px;
    color: #fff;
    list-style: none;
    padding: 0;
    z-index: 999;
  }
  .slider .slider-pointer li {
    display: inline-block;
    margin: 0 15px;
    width: 15px;
    height: 15px;
    border-radius: 15px;
    background-color: #ffffff;
    opacity: 0.85;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.5);
    transition: all 320ms ease;
  }
  .slider .slider-pointer li:hover {
    background-color: #e30006;
  }
  .slider .slider-pointer li.active {
    background-color: #b00005;
  }
  .slider .slider-inner {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .slider .slider-inner .item {
    width: 100%;
    height: 100%;
    float: left;
  }
  .slider .slider-inner .img {
    background-position: center top !important;
    width: 100%;
    height: 100%;
  }
  .slider .slider-control {
    position: absolute;
    width: 30px;
    height: 30px;
    z-index: 999;
    border-radius: 30px;
    text-align: center;
    font-weight: 900;
    font-size: 20px;
    line-height: 30px;
    background-color: #ffffff;
    opacity: 0.5;
    cursor: pointer;
    top: 40%;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.5);
    transition: all 320ms ease;
  }
  .slider .slider-control:hover {
    opacity: 0.65;
    background-color: #b00005;
  }
  .slider .slider-control:active {
    opacity: 0.85;
  }
  .slider .slider-control.prev {
    display: none;
    left: 20px;
  }
  .slider .slider-control.next {
    display: none;
    right: 20px;
  }
  .slider:hover .slider-control.prev {
    display: block;
    left: 20px;
  }
  .slider:hover .slider-control.next {
    display: block;
    right: 20px;
  }

</style>
</head>
<body>
<div class="slider" id="slider">
  <div class="slider-inner">
    <div class="item">
      <img class="img" style="background-color: red;">
    </div>
    <div class="item">
      <img class="img" style="background-color: pink;">
    </div>
    <div class="item">
      <img class="img" style="background-color: purple;">
    </div>
  </div>
</div>

<script src="http://www.jq22.com/jquery/1.8.3/jquery.min.js"></script>
<script>
/**
 * Author         : CheneyLiu
 * Date           : date
 * isAuto:        true, 自动播放
 * transTime:     3000, 自动播放间隔
 * animateSpeed:  1000,  动画速度
 * sliderMode:    ‘slide‘, 类型//‘slide | fade‘,
 * pointerControl: true, 指示器开关
 * pointerEvent:  ‘click‘, 指示器类型//‘hover‘ | ‘click‘,
 * arrowControl:  true, 左右控制
 */
;(function($) {
$.fn.Slider = function(options) {
  "use strict";

  var settings = $.extend({
    isAuto: true,
    transTime: 3000,
    animateSpeed: 1000,  
    sliderMode: slide, //‘slide | fade‘,
    pointerControl: true,
    pointerEvent: click,//‘hover‘ | ‘click‘,
    arrowControl: true,
  }, options);
  var interval;
  var isAnimating     = false;
  var $slider         = $(this);
  var $sliderWrap     = $slider.find(.slider-inner);
  var sliderCount     = $sliderWrap.find(> .item).length;
  var sliderWidth     = $slider.width();
  var currentIndex    = 0;

  var sliderFun = {
    controlInit: function() {
      // pointerControl
      if (settings.pointerControl) {
        
        var html = ‘‘;
        html += <ol class="slider-pointer">;
        for (var i = 0; i < sliderCount; i++) {
          if (i == 0) {
            html += <li class="active"></li>
          }else{
            html += <li></li>
          }
        }
        html += </ol>
        $slider.append(html);
          // 指示器居中
        var $pointer = $slider.find(.slider-pointer);
        $pointer.css({
          left: 50%,
          marginLeft: - $pointer.width()/2
        });
      }
      // pointerControl
      if (settings.arrowControl) {
        var html = "";
        html += <span class="slider-control prev">&lt;</span>;
        html += <span class="slider-control next">&gt;</span>
        $slider.append(html);
      }
      $slider.on(click, .slider-control.prev, function(event) {
        sliderFun.toggleSlide(prev);
      });
      $slider.on(click, .slider-control.next, function(event) {
        sliderFun.toggleSlide(next);
      });
    },
    // slider
    sliderInit: function() {
      sliderFun.controlInit();
      // 模式选择
      if (settings.sliderMode == slide) {
        // slide 模式
        $sliderWrap.width(sliderWidth * sliderCount);
        $sliderWrap.children().width(sliderWidth);
      }else{
        // mode 模式
        $sliderWrap.children().css({
          position: absolute,
          left: 0,
          top: 0
        });
        $sliderWrap.children().first().siblings().hide();
      }
      // 控制事件
      if (settings.pointerEvent == hover) {
        $slider.find(.slider-pointer > li).mouseenter(function(event) {
          sliderFun.sliderPlay($(this).index());
        });
      }else{
        $slider.find(.slider-pointer > li).click(function(event) {
          sliderFun.sliderPlay($(this).index());
        });
      }
      // 自动播放
      sliderFun.autoPlay();
    },
    // slidePlay
    sliderPlay: function(index) {
      sliderFun.stop();
      isAnimating = true;
      $sliderWrap.children().first().stop(true, true);
      $sliderWrap.children().stop(true, true);
      $slider.find(.slider-pointer).children()
        .eq(index).addClass(active)
        .siblings().removeClass(active);
      if (settings.sliderMode == "slide") {
        // slide
        if (index > currentIndex) {
          $sliderWrap.animate({
            left: -= + Math.abs(index - currentIndex) * sliderWidth + px
          }, settings.animateSpeed, function() {
            isAnimating = false;
            sliderFun.autoPlay();
          });
        } else if (index < currentIndex) {
          $sliderWrap.animate({
            left: += + Math.abs(index - currentIndex) * sliderWidth + px
          }, settings.animateSpeed, function() {
            isAnimating = false;
            sliderFun.autoPlay();
          });
        } else {
          return;
        }
      }else{
        // fade
        if ($sliderWrap.children(:visible).index() == index) return;
        $sliderWrap.children().fadeOut(settings.animateSpeed)
          .eq(index).fadeIn(settings.animateSpeed, function() {
            isAnimating = false;
            sliderFun.autoPlay();
          });
      }
      currentIndex = index;
    },
    // toggleSlide
    toggleSlide: function(arrow) {
      if (isAnimating) {
        return;
      }
      var index;
      if (arrow == prev) {
        index = (currentIndex == 0) ? sliderCount - 1 : currentIndex - 1;
        sliderFun.sliderPlay(index);
      }else if(arrow ==next){
        index = (currentIndex == sliderCount - 1) ? 0 : currentIndex + 1;
        sliderFun.sliderPlay(index);
      }
    },
    // autoPlay
    autoPlay: function() {
      if (settings.isAuto) {
        interval = setInterval(function () {
          var index = currentIndex;
          (currentIndex == sliderCount - 1) ? index = 0: index = currentIndex + 1;
          sliderFun.sliderPlay(index);
        }, settings.transTime);
      }else{
        return;
      }
    },
    //stop
    stop: function() {
      clearInterval(interval);
    },
  };
  sliderFun.sliderInit();
}
})(jQuery);
jQuery(document).ready(function($) {
  $(#slider).Slider();
});
</script>
</body>
</html>

 

 

 自定义banner插件效果(消除后退动画)


 

技术分享

 

 

上面效果jquery 代码

 


 

! function($) {
    
    $.fn.scrollBanner = function(obj) {
        var defauls = {
                images: [],
                scrollTime: 2000,
                bannerHeight: "500px",
                iconColor: "white",
                iconHovercolor: "orange",
                iconPosition: "right"
            } //声明默认值

        //比对传入的对象
        obj = $.extend(defauls, obj);
        //        console.log(obj)
        this.empty().append("<div class=‘scrollBanner-banner‘></div>")
        
        $.each(obj.images, function(index, item) {
        $(".scrollBanner-banner").append("<div class=‘scrollBanner-bannerInner‘><a href=‘"+item.href+"‘ target=‘_black‘>
<
img style=‘background-color:red‘ src=‘"+item.src+"‘ title=‘"+item.title+"‘ /></a></div>"); }); $(".scrollBanner-banner").append("<div class=‘scrollBanner-bannerInner‘><a href=‘"+obj.images[0].href+"‘ target=‘_black‘>
<
img style=‘background-color:red‘ src=‘"+obj.images[0].src+"‘ title=‘"+obj.images[0].title+"‘ /></a></div>");//在最后加入第一张图片 this.append("<div class=‘scrollBanner-icons‘></div>") $.each(obj.images, function(index,item) { //保存在data-* 中的数据,可以使用JS读取调用 $(".scrollBanner-icons").append("<span class=‘scrollBanner-icon‘ data-index=‘"+index+"‘></span>"); }); //设置各种css this.css({ "width": "100%", "height": obj.bannerHeight, "overflow": "hidden", "position":"relative", }); $(".scrollBanner-banner").css({ "width": obj.images.length+1+"00%", "height": obj.bannerHeight, }); $(".scrollBanner-bannerInner").css({ "width": 100/(obj.images.length+1)+"%", "height": obj.bannerHeight, "overflow": "hidden", "float": "left" }); $(".scrollBanner-bannerInner img").css({ "width": "1920px", "height": obj.bannerHeight, "position":"relative", "left": "50%", "margin-left": "-960px" }); $(".scrollBanner-icons").css({ "width":25*obj.images.length+"px", "position": "absolute", "z-index":"100", "height": "5px", "bottom":"40px", }) switch(obj.iconPosition){ case "left": $(".scrollBanner-icons").css({ "left":"40px", }) break; case "right": $(".scrollBanner-icons").css({ "right":"40px" }) break; case "center": $(".scrollBanner-icons").css({ "left":"50%", "margin-left":"-"+12.5*obj.images.length+"px", }) break; } $(".scrollBanner-icon").css({ "background-color": obj.iconColor, "width": "15px", "height": "4px", "display": "inline-block", "margin":" 0 5px", }) $(".scrollBanner-icon:eq("+0+")").css({"background-color":obj.iconHovercolor}) //实现banner滚动 var count=1 var icons=$(".scrollBanner-icon") setInterval(function(){ $(".scrollBanner-banner").css({ "margin-left":"-"+count+"00%", "transition":"all .5s ease" }); $(".scrollBanner-icon:eq(0)").css({"background-color":obj.iconHovercolor}); $(".scrollBanner-icon").css({"background-color":obj.iconColor}); $(".scrollBanner-icon:eq("+count+")").css({"background-color":obj.iconHovercolor}); if(count==obj.images.length){ $(".scrollBanner-icon:eq(0)").css({"background-color":obj.iconHovercolor}); } if(count>obj.images.length){ count=0; $(".scrollBanner-banner").css({ "margin-left":"0", "transition":"none" }); } count++; },obj.scrollTime) //小图标指上后变色,并切换banner $(".scrollBanner-icon").mouseover(function(){ $(".scrollBanner-icon").css({ "background-color": obj.iconColor,}) //由span触发mousover,这this指向这个span //但是this是js对象,必须使用$封装成JQuery对象 $(this).css({"background-color":obj.iconHovercolor}) var index=$(this).attr("data-index"); //将计数器count修改为index的值,让banner滚动的定时器刚好到图片下一张 count=index; $(".scrollBanner-banner").css({ "transition":"none", "margin-left": "-"+index+"00%" }); }) } }(jQuery)

 

调用代码

 


 

 

 

<script>
        $("#banner").scrollBanner({
            images:[
            {src:"img/shitou.png",tittle:"banner1",href:"http://www.jq22.com"},
            {src:"img/jiandao.png",tittle:"banner2",href:"http://www.qq.com"},
            {src:"img/jiandao.png",tittle:"banner3",href:"http://www.qq.com"},
            {src:"img/jiandao.png",tittle:"banner4",href:"http://www.baidu.com"},
            ],
            
        })
    </script>

 

 

 ( 为了方便使用 ,做了这个样式,如果不要动画只要切换图片,就直接把动画时间设为0;两个插件都可以;)

 

以上是关于jquery自定义banner图滚动插件---(解决最后一张图片倒回第一张图片的bug)的主要内容,如果未能解决你的问题,请参考以下文章

JQuery实现banner图滚动

jquery滚动条插件nanoscroller的应用

原生JS和jQuery实现banner图滚动那些事

前端javascript+jquery实现手风琴式的滚动banner或产品展示图

jquery 滚动条插件 可以自定义

jquery-leonaScroll-1.3-自定义竖向自适应滚动条插件