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 相关文章推荐
jQuery Validation插件remote验证方式的Bug解决
Jul 01 Javascript
基于jquery实现漂亮的动态信息提示效果
Aug 02 Javascript
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 Javascript
使用js实现数据格式化
Dec 03 Javascript
jQuery trigger()方法用法介绍
Jan 13 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
vue中实现左右联动的效果
Jun 22 Javascript
VUE安装使用教程详解
Jun 03 Javascript
vuex actions异步修改状态的实例详解
Nov 06 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面向对象教程之自定义类
2014/06/10 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
xss文件页面内容读取(解决)
2010/11/28 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
用javascript关闭本窗口技巧小结
2014/09/05 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
JavaScript实现斗地主游戏的思路
2016/02/29 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
详解vue-cli下ESlint 配置说明
2018/09/03 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
django admin后台添加导出excel功能示例代码
2019/05/15 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
Python3 requests文件下载 期间显示文件信息和下载进度代码实例
2019/08/16 Python
python super的使用方法及实例详解
2019/09/25 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
《将心比心》教学反思
2014/04/08 职场文书
老师对学生的寄语
2014/04/09 职场文书
初级党校心得体会
2014/09/11 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
学校感恩节活动策划方案
2014/10/06 职场文书
七年级地理教学计划
2015/01/22 职场文书
龙猫观后感
2015/06/09 职场文书
车间安全生产管理制度
2015/08/06 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL
Python之matplotlib绘制折线图
2022/04/13 Python
springboot读取resources下文件的方式详解
2022/06/21 Java/Android