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

HTML5培训技术

主要思路：

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

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

遗留问题:

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

demo01.

pptframe-0.1.0.js

[javascript]

/**

* @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("

");

}

$("#pptFrameTips").text(msg);

}

return this;

}

});

pptframe-animate-0.1.0.js

[javascript]

/**

* @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删除字符窜中的空格

下一篇：jQuery滑动式幻灯片播放特效