在上一篇中只是简单的实现了原生javascript实现图片轮播效果中的自动播放和手动暂停，在这一篇中笔者加入了切换的动画效果、左右上下轮播可调、以及切换图片计数功能。
<div id="index">
<em class="in_index" > <strong> </strong></em>
</div>其次在封装的库函数中加入设置动画的animate()函数，源码如下
Base.prototype.animate = function (obj) {
for (var i = 0; i < this.elements.length; i ++) {
var element = this.elements[i];
var attr = obj['attr'] == 'x' ? 'left' : obj['attr'] == 'y' ? 'top' :
obj['attr'] == 'w' ? 'width' : obj['attr'] == 'h' ? 'height' :
obj['attr'] == 'o' ? 'opacity' : obj['attr'] != undefined ? obj['attr'] : 'left';
var start = obj['start'] != undefined ? obj['start'] :
attr == 'opacity' ? parseFloat(getStyle(element, attr)) * 100 :
parseInt(getStyle(element, attr));
var t = obj['t'] != undefined ? obj['t'] : 10; //可选，默认10毫秒执行一次
var step = obj['step'] != undefined ? obj['step'] : 20; //可选，每次运行10像素
var alter = obj['alter'];
var target = obj['target'];
var mul = obj['mul'];
var speed = obj['speed'] != undefined ? obj['speed'] : 6; //可选，默认缓冲速度为6
var type = obj['type'] == 0 ? 'constant' : obj['type'] == 1 ? 'buffer' : 'buffer'; //可选，0表示匀速，1表示缓冲，默认缓冲
if (alter != undefined && target == undefined) {
target = alter + start;
} else if (alter == undefined && target == undefined && mul == undefined) {
throw new Error('alter增量或target目标量必须传一个！');
}
if (start > target) step = -step;
if (attr == 'opacity') {
element.style.opacity = parseInt(start) / 100;
element.style.filter = 'alpha(opacity=' + parseInt(start) +')';
} else {
//element.style[attr] = start + 'px';
}
if (mul == undefined) {
mul = {};
mul[attr] = target;
}
clearInterval(element.timer);
element.timer = setInterval(function () {
/*
问题1：多个动画执行了多个列队动画，我们要求不管多少个动画只执行一个列队动画
问题2：多个动画数值差别太大，导致动画无法执行到目标值，原因是定时器提前清理掉了
解决1：不管多少个动画，只提供一次列队动画的机会
解决2：多个动画按最后一个分动画执行完毕后再清理即可
*/
//创建一个布尔值，这个值可以了解多个动画是否全部执行完毕
var flag = true; //表示都执行完毕了
for (var i in mul) {
attr = i == 'x' ? 'left' : i == 'y' ? 'top' : i == 'w' ? 'width' : i == 'h' ? 'height' : i == 'o' ? 'opacity' : i != undefined ? i : 'left';
target = mul[i];
if (type == 'buffer') {
step = attr == 'opacity' ? (target - parseFloat(getStyle(element, attr)) * 100) / speed :
(target - parseInt(getStyle(element, attr))) / speed;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
}
if (attr == 'opacity') {
if (step == 0) {
setOpacity();
} else if (step > 0 && Math.abs(parseFloat(getStyle(element, attr)) * 100 - target) <= step) {
setOpacity();
} else if (step < 0 && (parseFloat(getStyle(element, attr)) * 100 - target) <= Math.abs(step)) {
setOpacity();
} else {
var temp = parseFloat(getStyle(element, attr)) * 100;
element.style.opacity = parseInt(temp + step) / 100;
element.style.filter = 'alpha(opacity=' + parseInt(temp + step) + ')';
}
if (parseInt(target) != parseInt(parseFloat(getStyle(element, attr)) * 100)) flag = false;
} else {
if (step == 0) {
setTarget();
} else if (step > 0 && Math.abs(parseInt(getStyle(element, attr)) - target) <= step) {
setTarget();
} else if (step < 0 && (parseInt(getStyle(element, attr)) - target) <= Math.abs(step)) {
setTarget();
} else {
element.style[attr] = parseInt(getStyle(element, attr)) + step + 'px';
}
if (parseInt(target) != parseInt(getStyle(element, attr))) flag = false;
}
//document.getElementById('test').innerHTML += i + '--' + parseInt(target) + '--' + parseInt(getStyle(element, attr)) + '--' + flag + '<br />';
}
if (flag) {
clearInterval(element.timer);
if (obj.fn != undefined) obj.fn();
}
}, t);
function setTarget() {
element.style[attr] = target + 'px';
}
function setOpacity() {
element.style.opacity = parseInt(target) / 100;
element.style.filter = 'alpha(opacity=' + parseInt(target) + ')';
}
}
return this;
};
<span style="font-size:18px;"><span style="font-size:14px;"></span></span>function getStyle(element, attr) {
var value;
if (typeof window.getComputedStyle != 'undefined') { //W3C
value = window.getComputedStyle(element, null)[attr];
} else if (typeof element.currentStyle != 'undeinfed') { //IE
value = element.currentStyle[attr];
}
return value;
}<span style="font-size:18px;"><span style="font-size:14px;"></span></span>
<span style="font-size:18px;"><span style="font-size:14px;"></span></span>最后就是在index.js中实现上述功能，源码如下，有注释不详解。
$(function () {
//轮播器初始化
//$('banner img').css('display','none');
//alert();
//$('#banner img').eq(0).css('display', 'block');
$('#banner img').opacity(0);
$('#banner img').eq(0).opacity(100); //设置第一张图片
$('#banner ul li').eq(0).css('color', '#333');
//$('#banner strong').html('asfsdc');
$('#banner strong').html($('#banner img').eq(0).attr('alt')); //获取alt的属性值
//轮播器计数器
var banner_index = 1;
//轮播器的种类
var banner_type = 2; //1表示左右切换，2表示上下滚动
//自动轮播
var banner_timer = setInterval(banner_fn,1000);
//手动轮播器
$('banner ul li').hover(function () {
//var num = $(this).index();
// alert(num);
clearInterval(banner_timer); //清理计时器，停止播放
// alert($(this).css('color'));
banner(this,banner_index == 0 ? $('#banner ul li').length() - 1 : banner_index - 1);
},function () {
banner_index = $(this).index() + 1;
banner_timer = setInterval(banner_fn, 3000);
});
function banner(obj,prev) {
$('#index .in_index').html(parseInt($(obj).index()) + 1 + '/' + $('#banner ul li').length());
$('#banner ul li').css('color', '#999');
$(obj).css('color', '#333');
if (banner_type == 1) {
$('#banner strong').html($('#banner img').eq($(obj).index()).attr('alt'));
$('#banner img').eq(prev).animate({
attr : 'o',
target : 0,
t : 30,
step : 10
}).css('zIndex', 1);
$('#banner img').eq($(obj).index()).animate({
attr : 'o',
target : 100,
t : 30,
step : 10
}).css('zIndex', 2);
}else if (banner_type == 2) {
//$('#banner img').opacity(100);
$('#banner strong').html($('#banner img').eq($(obj).index()).attr('alt'));
$('#banner img').eq(prev).animate({
attr : 'y',
target : 150,
t : 30,
step : 10
}).css('zIndex', 1).opacity(100);
$('#banner img').eq($(obj).index()).animate({
attr : 'y',
target : 0,
t : 30,
step : 10
}).css('top','-150').css('zIndex', 2).opacity(100); //强制设置初始值，并设置层次
};
};
function banner_fn() {
if (banner_index >= $('#banner ul li').length()) banner_index = 0;
banner($('#banner ul li').eq(banner_index).first(), banner_index == 0 ? $('#banner ul li').length() - 1 : banner_index - 1); // 根据当前索引获取下一张索引值
banner_index++;
}
});
<span style="font-size:18px;"><span style="font-size:14px;"></span></span>
文章最后上几张效果图，上下轮播（动态图太大不能上传，运行效果可直接下载源码跑）
左右轮播在上一篇已体现，单是图片还看不出效果，总体来说算是不错的。源码下载地址：http://pan.baidu.com/s/1o7WiFz0