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；两个插件都可以；）
时间： 2024-08-24 17:34:11