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() {// pointerControlif (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
        });}// pointerControlif (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") {// slideif (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{// fadeif ($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=1var 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；两个插件都可以；）

转载于:https://www.cnblogs.com/undeceive/p/7581932.html

jquery自定义banner图滚动插件---（解决最后一张图片倒回第一张图片的bug）相关推荐

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

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

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

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

  3. unity gaia 自定义高程图无法识别解决方法

    unity gaia 自定义高程图无法识别解决方法 在利用地形插件gaia的时候发现自己的高程图无法使用,原因是图片没有经过插件本身的程序化处理,也就是所谓的扫描 就是这个玩意儿 * 那么这个东西在哪 ...

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

    1.插进使用场景 请打开https://baike.baidu.com/item/日本动画#hotspotmining,查看百度百科页面效果. 2.插件源代码(更新 2017-08-28): jQue ...

  5. 如何使用JS实现banner图滚动

    通过JS实现banner图的滚动主要是定时器的应用 先新建好banner图的几张图片,最后一张与第一张用同一个,保证滚动的不间断 改好样式,需注意所有图片要在同行显示,否则不能向左滚动 声明一个函数, ...

  6. 前端jQuery的全屏滚动插件（使用方法）

    全屏滚动:无滚动条,一个屏幕一个屏幕的滚动 gitHub: GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Cre ...

  7. 关于【Stable-Diffusion WEBUI】生成全身图：插件解决面部崩坏问题

    文章目录 (零)前言 (一)脸难看的问题 (1.1)面部修复 (1.2)远景脸部问题 (二)面部修复插件(Face Editor) (2.1)模型文件下载 (2.2)例图参数 (零)前言 本篇主要介绍 ...

  8. 滑动轮播图实现最后一张图片无缝衔接第一张图片

    原理:使用insertBefore和insertAfter方法调整图片顺序. 测试:firefox/chrome/IE11正常 已知不足:每次播放均使用了一次insertBefore和insertAf ...

  9. jQuery自定义漂亮的下拉框插件8种效果演示

    原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示  在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en& ...

最新文章

  1. 如何写一个通用的README规范 1
  2. 【项目实战】多场景下的图表可视化表达
  3. awk和cut分割字符区别
  4. druid ssh加密 java mysql_springboot 整合druid数据库密码加密功能的实现代码
  5. 定向输出命令_数据流的世界，带你了解Linux重定向
  6. Hadoop Ecosystem解决方案---数据仓库
  7. 在php中源代码怎么查看,查看PHP Closure的源代码
  8. JSP中forward和include的区别
  9. mongodb在windows下安装启动
  10. 马斯克自曝特斯拉渣产能原因：我错了，过分信任自动化机器人
  11. 手机应用开发者必看：移动开发者大势图
  12. Spark：聚类算法之LDA主题模型算法
  13. ExactScan pro for mac(扫描仪整合工具)
  14. java异常继承哪个类_java异常继承何类，运行时异常与一般异常的区别
  15. 阿里巴巴 研发工程师Java暑期实习一面
  16. 955.WLB 不加班公司名单新增 6 家公司，移出 1 家公司！
  17. ASP.NET中 RadioButtonList(单选按钮组)的使用
  18. ecshop + 主从 + memcache + memcache监控
  19. 五分钟教你Android-Kotlin项目编写
  20. 如何在Excel中根据数量生成抽奖名单

热门文章

  1. Linux下vsftpd基本配置和虚拟用户设置的安全方法
  2. SQL Server 变量名称的Collcation跟Instance还是跟当前DB?
  3. 人渣scum服务器物品,人渣SCUM可以采集物品一览_可采集食物大全_可可网
  4. header+php+xiazai_php通过header方法实现文件下载
  5. “云原生”为何而生？
  6. 怎么恢复linux定时器任务,定时操作 crontab at 以及恢复定时操作
  7. 08Mysql与python交互
  8. java 展现层框架_spring快速入门例子教程：06展现层
  9. color-loss pytorch实现
  10. 教你如何在google上查阅一个方位的经纬度