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 相关文章推荐
告诉大家什么是JSON
Jun 10 Javascript
JavaScript学习笔记(十七)js 优化
Feb 04 Javascript
一行代码告别document.getElementById
Jun 01 Javascript
jquery的选择器的使用技巧之如何选择input框
Sep 22 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
angularjs的单选框+ng-repeat的实现方法
Sep 12 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
Sep 14 Javascript
JavaScript实现简单轮播图效果
Dec 01 Javascript
javascript 使用sleep函数的常见方法详解
Apr 26 Javascript
详解vue-router的Import异步加载模块问题的解决方案
May 13 Javascript
基于vue+element实现全局loading过程详解
Jul 10 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 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函数
2006/10/09 PHP
浅析虚拟主机服务器php fsockopen函数被禁用的解决办法
2013/08/07 PHP
Laravel 框架基于自带的用户系统实现登录注册及错误处理功能分析
2020/04/14 PHP
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
2010/09/10 Javascript
javascript仿qq界面的折叠菜单实现代码
2012/12/12 Javascript
jQuery中操控hidden、disable等无值属性的方法
2014/01/06 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
JavaScript实现将UPC转换成ISBN的方法
2015/05/26 Javascript
百度地图api如何使用
2015/08/03 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
JavaScript命令模式原理与用法实例详解
2020/03/10 Javascript
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
python实现发送QQ邮件(可加附件)
2020/12/23 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
幼儿园教师获奖感言
2014/03/11 职场文书
初中英语课后反思
2014/04/25 职场文书
无传销社区工作方案
2014/05/13 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
政风行风建设整改方案
2014/10/27 职场文书
写作技巧:怎样写好一份优秀工作总结?
2019/08/14 职场文书
Golang map映射的用法
2022/04/22 Golang
springboot读取resources下文件的方式详解
2022/06/21 Java/Android