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 相关文章推荐
js获取当月最后一天实例代码
Nov 19 Javascript
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
May 28 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
Feb 27 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
用JavaScript实现对话框的教程
Jun 04 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
Jun 08 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 Javascript
解决layer.confirm选择完之后消息框不消失的问题
Sep 16 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 截取字符串 分别适合GB2312和UTF8编码情况
2009/02/12 PHP
学习php过程中的一些注意点的总结
2013/10/25 PHP
PHP大神的十大优良习惯
2016/09/14 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
JS 动态加载脚本的4种方法
2009/05/05 Javascript
$.format,jquery.format 使用说明
2011/07/13 Javascript
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
window.opener用法和用途实例介绍
2013/08/19 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
js+html5实现canvas绘制镂空字体文本的方法
2015/06/05 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
2017/06/22 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
Vue加载组件、动态加载组件的几种方式
2018/08/31 Javascript
详解vue 数组和对象渲染问题
2018/09/21 Javascript
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
Python解析、提取url关键字的实例详解
2018/12/17 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
Python循环结构的应用场景详解
2019/07/11 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
python实现手势识别的示例(入门)
2020/04/15 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
环境科学专业教师求职信
2014/07/12 职场文书
办公室禁烟通知
2015/04/23 职场文书
《颐和园》教学反思
2016/02/19 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书