欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery开发图片翻页效果实现方法

程序员文章站 2023-11-26 11:31:40
jquery开发图片翻页效果实现方法。 . 代码如下: $(function($){       $.fn.changelist...

jquery开发图片翻页效果实现方法。

. 代码如下:


$(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;

}