原生javascript实现图片轮播效果——续

在上一篇中只是简单的实现了原生javascript实现图片轮播效果中的自动播放和手动暂停，在这一篇中笔者加入了切换的动画效果、左右上下轮播可调、以及切换图片计数功能。

<div id="index">
<em class="in_index" > <strong> </strong></em>
</div>

在html中加入一个div，作为图片计数用处，同样css参见给出的源码。

其次在封装的库函数中加入设置动画的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>

其中涉及的跨浏览器获取Style函数封装在tools中：

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