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 相关文章推荐
Ruffy javascript 学习笔记
Nov 30 Javascript
js chrome浏览器判断代码
Mar 28 Javascript
基于jquery的复制网页内容到WORD的实现代码
Feb 16 Javascript
实现动画效果核心方式的js代码
Sep 27 Javascript
js加入收藏夹代码(兼容ie/ff/op)
May 16 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
Oct 19 Javascript
基于jQuery实现网页打印功能
Dec 01 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 Javascript
jQuery插件Validation表单验证详解
May 26 jQuery
vue3中的组件间通信
Mar 31 Vue.js
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
Memcached常用命令以及使用说明详解
2013/06/27 PHP
PHP编写简单的App接口
2016/08/28 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
为原生js Array增加each方法
2012/04/07 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
Python pass详细介绍及实例代码
2016/11/24 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
numpy向空的二维数组中添加元素的方法
2018/11/01 Python
对于Python深浅拷贝的理解
2019/07/29 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
美国在线面料商店:Fashion Fabrics Club
2020/01/31 全球购物
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
感恩节活动方案
2014/01/27 职场文书
《海伦?凯勒》教学反思
2014/04/17 职场文书
化学教育专业自荐信
2014/07/04 职场文书
2014年法务工作总结
2014/12/11 职场文书
关于颐和园的导游词
2015/01/30 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python