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）的更多相关文章

  1. JQuery自定义插件详解之Banner图滚动插件

      前  言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...

  2. JQuery实现banner图滚动

      前  言           jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是 ...

  3. Jquery 实现banner图滚动效果

    html代码: <div id="focus"> <ul> <li><p>禅的修行应要无欲无求1</p><a hr ...

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

    前言 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是需要使用自定义代码来扩展这些 ...

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

    在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...

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

    1.插进使用场景 请打开https://baike.baidu.com/item/%E6%97%A5%E6%9C%AC%E5%8A%A8%E7%94%BB#hotspotmining,查看百度百科页面 ...

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

    系统默认的滚动条样式,真的已经看的够恶心了.试想一下,如果在一个很有特色和创意的网页中,出现了一根系统中默认的滚动条样式,会有多么的别扭. 为了自己定义网页中的滚动条的方法,我真的已经找了很久了,就目 ...

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

    1.HTML5/CSS3超酷焦点图特效 带前后翻页按钮 今天要分享的这款HTML5/CSS3焦点图插件切换效果比较简单,但是外观和功能却十分强大.该CSS3焦点图在切换图片时,图片以淡入淡出的方式缩小 ...

  9. 最简单实用的JQuery实现banner图中的text打字动画效果！！！

    下面,就让小博详细介绍如何实现上面GIF实现的banner图中的文字动画效果,最简单实用的方法(鉴于代码量较小,就内嵌在一个HTML文件中了): 首先,我们要在header导入一个jQuery,并新建 ...

随机推荐

  1. 文本排序的王者：玩透sort命令

    本文目录: 1.1 选项说明 1.2 sort示例 1.3 深入研究sort sort是排序工具,它完美贯彻了Unix哲学:"只做一件事,并做到完美".它的排序功能极强.极完整,只 ...

  2. 新手之VM下安装centos版本Linux系统完整版！

    一.安装必备软件 1:下载好VM workstations虚拟机 2:下载好你要安装的centos版本. 如果没有,请自己先百度下载好~或者找我要. 二.开始安装 VM workstation部分 1 ...

  3. 第三篇--Jmeter测试数据库Mysql

    Jmeter模拟100用户访问Mysql数据库 1.将Mysql数据库的驱动[mysql-connector-java-5.1.15-bin.jar]放到jmeter的lib目录下,新建线程组100[ ...

  4. macaca测试web小例子

    上午刚把macaca的环境在公司的电脑上吧web 端的环境给搭建好,于是乎,看看网上的例子,看看官方的文档 https://macacajs.github.io/wd.py/ 可以在这个链接看到原滋原 ...

  5. 移动端iOS阻止橡皮筋效果

    一.遇到的问题 移动端开发中,iOS的微信浏览器也好.Safari也好在浏览网页的时候会出现橡皮筋效果.就是当页面拉到尽头的时候还能再继续拉动,露出浏览器的底色,松手会回弹回去. 微信浏览器: Saf ...

  6. 设计模式，Let's “Go”！ (下)

    * { color: #3e3e3e } body { font-family: "Helvetica Neue", Helvetica, "Hiragino Sans ...

  7. 总结各种排序算法【Java实现】

    一.插入类排序 1.直接插入排序 思想:将第i个插入到前i-1个中的适当位置 时间复杂度:T(n) = O(n²). 空间复杂度:S(n) = O(1). 稳定性:稳定排序. 如果碰见一个和插入元素相 ...

  8. Spring五个事务隔离级别和七个事务传播行为

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt216 Spring五个事务隔离级别和七个事务传播行为 1. 脏读 :脏读就是 ...

  9. spring cloud认识

    Spring Cloud是一个基于Spring Boot实现的云应用开发工具,它为基于JVM的云应用开发中的配置管理.服务发现.断路器.智能路由.微代理.控制总线.全局锁.决策竞选.分布式会话和集群状 ...

  10. C-C++到底支不支持VLA以及两种语言中const的区别

    C-C++到底支不支持VLA以及两种语言中const的区别 到底支不支持VLA VLA就是variable-length array,也就是变长数组. 最近写程序的时候无意间发现,gcc中竟然支持下面 ...