手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jquery实现图片翻页效果
jquery实现图片翻页效果
摘要:复制代码代码如下:$(function($){$.fn.changeList=function(options){vardefaults={...

复制代码 代码如下:

$(function($){

$.fn.changeList = function(options){

var defaults = {

tag : 'li', // tab name

subName : '.utilTabSub', // sub class name

eventType : 'click', // event type

num : 4,

showType : 'show' // show effect type

},

opts = $.extend({}, defaults, options),

that = $(this),

subUl = that.find(opts.subName),

subItems = subUl.find('li'),

size = subItems.length,

liW = subItems.outerWidth(true),

ulW = liW * size,

page = size + 1,

n = opts.num,

randNum = 0,

m = 0;

if(size > n){

that.find(opts.tag)[opts.eventType](function() {

randNum = mathRand(n, size);

subItems.hide();

$.each(randNum, function (i, el) {

subItems.eq(el).fadeIn(800);

});

});

}

};

}(jQuery));

/**

* create Random number

* @param bit: number

* @param max: max number

* @return {Array}

*/

function mathRand(bit, max){

var num = 0,

arr = [],

ret = [];

for(var i=0; i<bit; i++){

num = Math.floor(Math.random() * max);

if($.inArray(num, ret) == -1){

ret.push(num);

} else {

i--;

continue;

}

}

return ret;

}

【jquery实现图片翻页效果】相关文章:

Javascript实现div层渐隐效果的方法

jQuery实现点击图片翻页展示效果的方法

onmousewheel event 缩放图片效果

jQuery实现仿腾讯微博滑出效果报告每日天气的方法

jQuery实现的多屏图像图层切换效果实例

jQuery实现dialog设置focus焦点的方法

JS实现模拟风力的雪花飘落效果

jQuery处理图片加载失败的常用方法

jQuery实现文本展开收缩特效

jquery预加载图片的方法

精品推荐
分类导航