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

左手的ㄟ右手 2022-08-23 05:51 204阅读 0赞

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

在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 + ' ';
 				
 			}
 			
 			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;
 };

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

最后就是在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++;
 	}
 });

文章最后上几张效果图，上下轮播（动态图太大不能上传，运行效果可直接下载源码跑）

![Center][]

左右轮播在上一篇已体现，单是图片还看不出效果，总体来说算是不错的。源码下载地址：http://pan.baidu.com/s/1o7WiFz0

[javascript]: http://blog.csdn.net/shoushou71/article/details/51614525
[Center]: /images/20220721/2e742bfe93e0413bb09229f84828303c.png