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注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
jQuery unbind()方法实例详解
Jan 19 Javascript
Javascript的表单验证-揭开正则表达式的面纱
Mar 18 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
Jan 17 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 Javascript
Javascript实现关闭广告效果
Jan 29 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&amp;MYSQL留言板源码
2020/07/19 PHP
php 随机排序广告的实现代码
2011/05/09 PHP
php如何控制用户对图片的访问 PHP禁止图片盗链
2016/03/25 PHP
PHP中file_exists使用中遇到的问题小结
2016/04/05 PHP
利用PHP获取访客IP、地区位置、浏览器及来源页面等信息
2017/06/27 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
Javascript 刷新全集常用代码
2009/11/22 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
jquery序列化表单去除指定元素示例代码
2014/04/10 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
jQuery导航条固定定位效果实例代码
2017/05/26 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
浅谈angularJS2中的界面跳转方法
2018/08/31 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
vue页面加载时的进度条功能(实例代码)
2020/01/13 Javascript
python实现网页链接提取的方法分享
2014/02/25 Python
python购物车程序简单代码
2018/04/18 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
百丽国际旗下购物网站:优购
2017/02/28 全球购物
英国最大的宝石首饰超市:QP Jewellers
2018/09/23 全球购物
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
七夕情人节促销方案
2014/06/07 职场文书
个人四风问题整改措施
2014/10/24 职场文书
2015年教师自我评价范文
2015/03/04 职场文书
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP