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>"); }); //设置各种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；两个插件都可以；）