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 相关文章推荐
解决FLASH需要点击激活的代码
Dec 20 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
Sep 01 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
Aug 26 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
Feb 27 Javascript
安装vue-cli报错 -4058 的解决方法
Oct 19 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
vue 表单之通过v-model绑定单选按钮radio
May 13 Javascript
VuePress 中如何增加用户登录功能
Nov 29 Javascript
创建nuxt.js项目流程图解
Mar 13 Javascript
通过JS判断网页是否为手机打开
Oct 28 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 exif扩展方法开启详解
2014/07/28 PHP
php网页病毒清除类
2014/12/08 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
php实现微信扫码支付
2017/03/26 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
jquery 插件开发备注
2010/08/27 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
js 调用百度地图api并在地图上进行打点添加标注
2014/05/13 Javascript
JS获取时间的方法
2015/01/21 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
浅谈关于vue中scss公用的解决方案
2019/12/02 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python自动化构建工具scons使用入门笔记
2015/03/10 Python
Python的Django框架中消息通知的计数器实现教程
2016/06/13 Python
Python 常用的安装Module方式汇总
2017/05/06 Python
python使用tensorflow深度学习识别验证码
2018/04/03 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
对python插入数据库和生成插入sql的示例讲解
2018/11/14 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
Python3如何在服务器打印资产信息
2020/08/27 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
英国领先的在线高尔夫设备零售商:Golfgeardirect
2020/12/11 全球购物
大学英语演讲稿范文
2014/04/24 职场文书
相亲大会策划方案
2014/06/05 职场文书
争先创优心得体会
2014/09/12 职场文书
新学期开学寄语2016
2015/12/04 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书