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实现的切换面板实例代码
Jun 17 Javascript
node.js中的http.request.end方法使用说明
Dec 10 Javascript
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
Mar 01 Javascript
vue-router 中router-view不能渲染的解决方法
May 23 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
React组件refs的使用详解
Feb 09 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
Dec 11 Javascript
JavaScript 截取字符串代码实例
Sep 05 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
基于文本的访客签到簿
2006/10/09 PHP
基于initPHP的框架介绍
2013/04/18 PHP
php导出word格式数据的代码实例
2013/11/25 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
php集成动态口令认证
2016/07/21 PHP
laravel 实现用户登录注销并限制功能
2019/10/24 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
jQuery 扩展对input的一些操作方法
2009/10/30 Javascript
jQuery示例收集
2010/11/05 Javascript
jQuery load方法用法集锦
2011/12/06 Javascript
jQuery实现炫酷的鼠标轨迹特效
2015/02/01 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
2019/11/14 Javascript
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
pygame游戏之旅 游戏中添加显示文字
2018/11/20 Python
python三方库之requests的快速上手
2019/03/04 Python
Flask中endpoint的理解(小结)
2019/12/11 Python
完美解决ARIMA模型中plot_acf画不出图的问题
2020/06/04 Python
通过实例解析python and和or使用方法
2020/11/14 Python
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
梅西百货官网:Macy’s
2020/08/04 全球购物
WebSphere面试题:在WebSphere里面如何部署一个应用
2015/08/02 面试题
《小池塘》教学反思
2014/02/28 职场文书
美术指导助理求职信
2014/04/20 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
python模板入门教程之flask Jinja
2022/04/11 Python