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"><</span>‘; ???????html += ‘<span class="slider-control next">></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>"); ???????});//设置各种cssthis.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）
原文地址：http://www.cnblogs.com/undeceive/p/7581932.html