jquery实现图片翻页效果


Posted in Javascript onDecember 23, 2013
$(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;
}
Javascript 相关文章推荐
滚动经典最新话题[prototype框架]下编写
Oct 03 Javascript
文档对象模型DOM通俗讲解
Nov 01 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
jQuery事件用法详解
Oct 06 Javascript
vue组件初学_弹射小球(实例讲解)
Sep 06 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
利用JS代码自动删除稿件的普通弹幕功能
Sep 20 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
Mar 25 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 Javascript
js substring从右边获取指定长度字符串(示例代码)
Dec 23 #Javascript
JS判断对象是否存在的10种方法总结
Dec 23 #Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 #Javascript
js中判断用户输入的值是否为空的简单实例
Dec 23 #Javascript
js中判断对象是否为空的三种实现方法
Dec 23 #Javascript
利用JS判断用户是否上网(连接网络)
Dec 23 #Javascript
js禁止回车提交表单的示例代码
Dec 23 #Javascript
You might like
php中Session的生成机制、回收机制和存储机制探究
2014/08/19 PHP
jQuery 处理表单元素的代码
2010/02/15 Javascript
jquery 笔记 事件
2011/11/02 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
extjs简介_动力节点Java学院整理
2017/07/17 Javascript
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
JS实现的自定义map方法示例
2019/05/17 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
Python下使用Psyco模块优化运行速度
2015/04/05 Python
python 迭代器和iter()函数详解及实例
2017/03/21 Python
python3设计模式之简单工厂模式
2017/10/17 Python
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
python 导入数据及作图的实现
2019/12/03 Python
python实现可下载音乐的音乐播放器
2020/02/25 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
python2和python3哪个使用率高
2020/06/23 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
Artist Guitars新西兰:乐器在线商店
2017/09/17 全球购物
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
证婚人搞笑证婚词
2014/01/10 职场文书
安全教育实施方案
2014/03/02 职场文书
中等生评语大全
2014/05/04 职场文书
物理教育专业求职信
2014/06/25 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
仓库管理制度范本
2015/08/04 职场文书
导游词之山东八大关
2019/12/18 职场文书