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;两个插件都可以;)

时间: 2024-11-01 01:54:36

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

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

  前  言 阿q 作为一个准前端学员,banner图可是很重要的呢.本人,小白一只,给大家分享几个刚刚学习的基础banner图事件.~~~ 1. 小广告图滚动播放 1.1HTML代码 首先,创建基本结构 <div id="outside"> <div id="inside"> <div>1</div> <div>2</div> <div>3</div> <div&

Jquery 实现banner图滚动效果

html代码: <div id="focus"> <ul> <li><p>禅的修行应要无欲无求1</p><a href="http://www.jiyun360.com/topic/201405/index.aspx" target="_blank" title="浓情初夏,感恩回馈!"> <img src="images/shenxiao

jQuery自定义插件--banner图滚动

前言 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是需要使用自定义代码来扩展这些核心函数来提高开发效率.我们知道, jQuery库是为了加快JavaScript的开发速度而设计的,通过简化编写JavaScript的方式,减少代码量.所以,今天就带大家了解一下jQuery自定义插件以及自定义插件案例---banner图滚动. 一.自定义插件 自定义插件一般有两种类型:全局插件和局

原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等

在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那些这些场景都是如何实现的呢?今天,小瑞老师就一口气把所有经典网页特效效果送给大家!!!          全部都是原生JS实现哦~~根本不需要什么JQuery.AngularJS等各种类库,是不是很激动,让我们开始吧~         Tips: 可以收藏博客,保存源码,关键时刻Ctrl+C哦~[微

基于jquery的锚点滚动插件(百度百科效果) anchorScroll.js

1.插进使用场景 请打开https://baike.baidu.com/item/%E6%97%A5%E6%9C%AC%E5%8A%A8%E7%94%BB#hotspotmining,查看百度百科页面效果. 2.插件源代码: /* * 作者:孟繁贵 * 2017-08-25 * 版本:1.0 */ jQuery.anchorScroll = function(elem1, elem2) { var currObj, offsetTop = 0, h2List = new Array(), h3L

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScrollPane,大家见过的可能比较多,但是这个插件太过于古老而且功能不强大,效果在几年前非常不错,但是放在现在就不好说了.所以我选择了后者:mCustomScrollbar.下图是两者官方示例的简单对比: 本文就是介绍如何使用 mCustomScrollbar 这个插件,大部分的内容是翻译自 mCus

如何使用JS实现banner图滚动

通过JS实现banner图的滚动主要是定时器的应用 先新建好banner图的几张图片,最后一张与第一张用同一个,保证滚动的不间断 改好样式,需注意所有图片要在同行显示,否则不能向左滚动 声明一个函数,为定时器函数,函数内通过switch结构执行,case的值通过声明一个全局变量每次执行函数的时候使其自加,通过执行函数的次数来确定banner图向左移动多少的距离.需注意第5次要使全局变量归零才能使定时器内的switch结构无限循环,在样式表中可以设置过渡效果,使滚动更有节奏感 接下来实现banne

jquery之全屏滚动插件fullPage.js

简介 fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时自动调整 可设置滚动宽度.背景颜色.滚动速度.循环选项.回调.文本对齐方式等等 兼容性 jQuery 兼容 兼容 jQuery 1.7+. 浏览器兼容 IE8+ ? Chrome ? Firefox ? Opera ? Safari ? 使用方法 1.引入文件

8款耀眼的jQuery/HTML5焦点图滑块插件

1.HTML5/CSS3超酷焦点图特效 带前后翻页按钮 今天要分享的这款HTML5/CSS3焦点图插件切换效果比较简单,但是外观和功能却十分强大.该CSS3焦点图在切换图片时,图片以淡入淡出的方式缩小消失并显示下一张图片.焦点图插件还拥有一套非常大气的前后翻页按钮,是一款非常实用HTML5/CSS3焦点图应用. 在线演示 源码下载 2.HTML5/CSS3淡入淡出滑块焦点图 非常清新 我们已经分享过几款简单的CSS3/jQuery焦点图插件,今天要分享的这款焦点图切换时有淡如淡出的动画效果,是利