jquery实现可配置动态幻灯片代码

最新推荐文章于 2021-06-09 19:26:06 发布

blatar

最新推荐文章于 2021-06-09 19:26:06 发布

阅读量469

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/blatar/article/details/17005769

版权

JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

主要思路：

1、列表元素增加 “pptAction” 属性，属性值对应“pptframe-animate-0.1.0.js” 中的动画函数名称

2、使用 next()和prev() 方法实现切换效果

遗留问题:

1、prev()目前没有实现动画

demo01.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>幻灯片</title>
<link rel="stylesheet" type="text/css" href="../reset.css" />
<style type="text/css">

</style>
<script src="../jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="pptframe-0.1.0.js" type="text/javascript"></script>
<script src="pptframe-animate-0.1.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	var ppt = $.pptFrame({
		loop: true,
		id:"scrollDiv"
	});
	
	$("#index").text(ppt.opts.index);

	$(document).keyup(function(event){
		// 左方向键值 37 ，右方向键值 39
		if(event.which == 37){
			ppt.prev();
			$("#index").text(ppt.opts.index);
		}
		if(event.which == 39){
			ppt.next();
			$("#index").text(ppt.opts.index);
		}
	});
});

</script> 
</head>

<body>
<ul id="scrollDiv">
	<li><a href="#"><img src="images/1.jpg" alt="images/1.jpg" width="280"/></a></li>
	<li pptAction="fadeIn"><a href="#"><img src="images/2.jpg" alt="images/2.jpg" width="280"/></a></li>
	<li pptAction="scrollDown"><a href="#"><img src="images/3.jpg" alt="images/3.jpg" width="280"/></a></li>
	<li pptAction="scrollTop"><a href="#"><img src="images/4.jpg" alt="images/4.jpg" width="280"/></a></li>
	<li pptAction="scrollRight"><a href="#"><img src="images/5.jpg" alt="images/5.jpg" width="280"/></a></li>
	<li pptAction="scrollLeft"><a href="#"><img src="images/6.jpg" alt="images/6.jpg" width="280"/></a></li>
</ul>
<span id="index"></span>
</body>
</html>

pptframe-0.1.0.js

/**
* @author Archer Du
* @createDate 2013-11-28
* 幻灯片
* 基本功能实现
**/
$.extend({
    pptFrame: function(opt, callback) {
        this.defaults = {
            // 滚动区域id
            objId: "",
			// 当前子节点
			index: -1,
			// 循环播放
			loop: true,
			// 动画持续时间
			duration : 400,
			// 首页指示文字
			pointInfo : "按向右方向键播放下一图片",
			width : 280,
			height : 210,
		}			
		//参数初始化
        var opts = $.extend(this.defaults, opt);
		this.opts = opts;
		opts.maxIndex = $("#" + opts.id + " li").size() - 1;
		var pptFrameAnimate = $.pptFrameAnimate();
		// 初始ul 样式
		$("#" + opts.id).css({
			"position":"relative",
			"width":opts.width + "px",
			"height":opts.height + "px",
			"overflow":"hidden"
		});
		
		// 初始提示文字	
		tips(opts.pointInfo);
		
		$("#" + opts.id + " li").css({
			"position":"absolute",
			"left":0,
			"top":0,
			"width":opts.width + "px",
			"height":opts.height + "px",
			"overflow":"hidden",
			"visibility" : "hidden"
		});
		
		// 下一个节点
		this.next = function(){
				
			// 判断是否循环
			if(opts.loop == true && opts.index >= opts.maxIndex){
				// 后面默认 index 加1 ，所以初始index 为 -1
				opts.index = -1;
			}
			opts.index++;
			// 判读是否到最大值
			if( opts.index > opts.maxIndex){
				tips("已经是最后一页");
				opts.index = opts.maxIndex;
			}else{
				
				$("#" + opts.id + " li:gt(" + opts.index + ")").css({
					"visibility" : "hidden"
				});
				$("#" + opts.id + " li:eq(" + opts.index + ")").css({
					"visibility" : "visible"
				});
					
				// 执行动画
				//scrollDown($("#" + opts.id + " li:eq(" + opts.index + ")"));
				if($("#" + opts.id + " li:eq(" + opts.index + ")").attr("pptAction")){
					var evalFunction = 'pptFrameAnimate.' + $("#" + opts.id + " li:eq(" + opts.index + ")").attr("pptAction") + '($("#" + opts.id + " li:eq(" + opts.index + ")"), ' + opts.duration + ')';
					
					eval(evalFunction);
				}
				// 动画结束
			}
		}
		
		// 上一个节点
		this.prev = function(){
		
			opts.index--;
			// 判断是否循环
			if(opts.loop == true && opts.index < 0 ){
				opts.index = opts.maxIndex;
			}
			// 判读是否到最大值
			if( opts.index < 0){
				tips("已经是第一页");
				opts.index = 0;
			}
			
			$("#" + opts.id + " li:gt(" + opts.index + ")").css({
				"visibility" : "hidden"
			});
			
			$("#" + opts.id + " li:eq(" + opts.index + ")").css({
				"visibility" : "visible"
			});
		}
		
		// 提示信息
		function tips(msg){
			if($("#pptFrameTips").size() == 0){
				$("#" + opts.id).after("<div id=\"pptFrameTips\"></div>");
			}
			
			$("#pptFrameTips").text(msg);
		}
		return this;
	}
});

pptframe-animate-0.1.0.js

/**
* @author Archer Du
* @createDate 2013-11-28
* 幻灯片动画
* 基本功能实现
**/
$.extend({
    pptFrameAnimate: function(opt, callback) {
		/**
		 * 下拉:scrollDown
		 */
		this.scrollDown = function(obj, duration){
			var temporaryHeight = $(obj).height();
			$(obj).css({
				"height":"0px",
				opacity:0
			});
			
			$(obj).animate({height : temporaryHeight + "px", opacity:1});
		}
		
		/**
		 * 向上滚动:scrollTop
		 */
		this.scrollTop = function(obj, duration){
			var temporaryHeight = $(obj).height();
			$(obj).css({
				"top": temporaryHeight + "px",
				opacity:0
			});
			
			$(obj).animate({top : "0px", opacity:1});
		}
		
		/**
		 * 右拉:scrollRight
		 */
		this.scrollRight = function(obj, duration){
			var temporaryWidth = $(obj).width();
			$(obj).css({
				"width":"0px",
				opacity:0
			});
			
			$(obj).animate({width : temporaryWidth + "px", opacity:1});
		}
		
		/**
		 * 左向滚动:scrollRight
		 */
		this.scrollLeft = function(obj, duration){
			var temporaryLeft = $(obj).css("left");
			$(obj).css({
				"left": $(obj).width() +　"px",
				opacity:0
			});
			
			$(obj).animate({ left : temporaryLeft, opacity:1});
		}
		
		/**
		 * 渐显:fadeIn
		 */
		this.fadeIn = function(obj, duration){
			$(obj).css({
				opacity:0
			});
			$(obj).animate({ opacity:1}, duration);
		}

		return this;
	}
});

资源下载： jquery实现可配置动态幻灯片代码.zip