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 相关文章推荐
location.href 在IE6中不跳转的解决方法与推荐使用代码
Jul 08 Javascript
JavaScript中的排序算法代码
Feb 22 Javascript
Js+Jq获取URL参数的集中方法示例代码
May 20 Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 Javascript
Javascript中的匿名函数与封装介绍
Mar 15 Javascript
JavaScript阻止浏览器返回按钮的方法
Mar 18 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
angular.js分页代码的实例
Jul 27 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
提高Node.js性能的应用技巧分享
Aug 10 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+Mysql无限分类的方法汇总
2015/03/02 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
JavaScript中的对象化编程
2008/01/16 Javascript
Javascript中的相等与不等运算
2010/04/25 Javascript
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
突发奇想的一个jquery插件
2010/11/19 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
jQuery设计思想
2017/03/07 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
angular组件间通讯的实现方法示例
2020/05/07 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
浅谈PYTHON 关于文件的操作
2019/03/19 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
Python Flask框架实现简单加法工具过程解析
2020/06/03 Python
python 实现IP子网计算
2021/02/18 Python
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
Unix如何添加新的用户
2014/08/20 面试题
学校十一活动方案
2014/02/01 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
客服专员岗位职责
2014/02/28 职场文书
绩效管理实施方案
2014/03/19 职场文书
就业协议书的作用
2014/04/11 职场文书
保护动物的标语
2014/06/11 职场文书
奥林匹克的口号
2014/06/13 职场文书
班子个人四风问题整改措施
2014/10/04 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
我的1919观后感
2015/06/03 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android