原生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;//可选，默认缓冲速度为6var 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') {         //W3Cvalue = window.getComputedStyle(element, null)[attr];} else if (typeof element.currentStyle != 'undeinfed') {     //IEvalue = 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