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 相关文章推荐
Jquery中Ajax 缓存带来的影响的解决方法
May 19 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
vue-cli构建项目下使用微信分享功能
May 28 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
如何使用puppet替换文件中的string
Dec 06 Javascript
微信小程序云开发如何使用云函数生成二维码
May 18 Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 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
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
php基于curl扩展制作跨平台的restfule 接口
2015/05/11 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
Javascript常用运算符(Operators)-javascript基础教程
2007/12/14 Javascript
javascript 添加和移除函数的通用方法
2009/10/20 Javascript
JS 树形递归实例代码
2010/05/18 Javascript
Javascript面向对象之四 继承
2011/02/08 Javascript
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
javascript搜索框效果实现方法
2015/05/14 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
基于node.js之调试器详解
2017/08/22 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
vue axios请求频繁时取消上一次请求的方法
2018/11/10 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
Vue实现小购物车功能
2020/12/21 Vue.js
python实现博客文章爬虫示例
2014/02/26 Python
Python解析最简单的验证码
2016/01/07 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
Python实现屏幕录制功能的代码
2020/03/02 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
苹果美国官方商城:Apple美国
2016/08/24 全球购物
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
孝敬父母的活动方案
2014/08/28 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
Apache POI的基本使用详解
2021/11/07 Servers
Python帮你解决手机qq微信内存占用太多问题
2022/02/15 Python
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python