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 相关文章推荐
JavaScript判断两种格式的输入日期的正确性的代码
Mar 25 Javascript
JavaScript中的History历史对象
Jan 16 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
Mar 31 Javascript
浅析Bootstrap缩略图组件与警示框组件
Apr 29 Javascript
javascript类型系统——undefined和null全面了解
Jul 13 Javascript
AngularJS基础 ng-paste 指令简单示例
Aug 02 Javascript
详解jQuery停止动画——stop()方法的使用
Dec 14 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 Javascript
javascript canvas实现雨滴效果
Jun 09 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 数组基本操作小结(推荐)
2016/06/13 PHP
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
javascript 判断整数方法分享
2014/12/16 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python生成验证码实例
2014/08/21 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
对python中各个response的使用说明
2020/03/28 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
CSS3 :default伪类选择器使用简介
2018/03/15 HTML / CSS
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
Myprotein荷兰官网:欧洲第一运动营养品牌
2020/07/11 全球购物
现代化办公人员工作的自我评价
2013/10/16 职场文书
高级技校毕业生自荐信
2013/11/18 职场文书
生物科学专业职业规划书范文
2014/02/11 职场文书
小学数学国培感言
2014/03/10 职场文书
工会换届选举方案
2014/05/21 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
先进个人总结范文
2015/02/15 职场文书
《鲸》教学反思
2016/02/23 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
详解Laravel框架的依赖注入功能
2021/05/27 PHP
详解nginx location指令
2022/01/18 Servers
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技