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实现的真正的iframe高度自适应(兼容IE,FF,Opera)
Mar 07 Javascript
JS学习之一个简易的日历控件
Mar 24 Javascript
jQuery 开发者应该注意的9个错误
May 03 Javascript
JavaScript获取onclick、onchange等事件值的代码
Jul 22 Javascript
js实现的折叠导航示例
Nov 29 Javascript
Javascript的表单验证-揭开正则表达式的面纱
Mar 18 Javascript
jquery做个日期选择适用于手机端示例
Jan 10 Javascript
vue动态组件实现选项卡切换效果
Mar 08 Javascript
Vue.js实现数据响应的方法
Aug 13 Javascript
JavaScript简单实现的仿微博留言功能示例
Jan 17 Javascript
JavaScript实现的开关灯泡点击切换特效示例
Jul 08 Javascript
javascript用defineProperty实现简单的双向绑定方法
Apr 03 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-MySQL教程归纳总结
2008/06/07 PHP
一些PHP Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
PHP5函数小全(分享)
2013/06/06 PHP
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
浅谈php7的重大新特性
2015/10/23 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
制作特殊字的脚本
2006/06/26 Javascript
JavaScript中的对象化编程
2008/01/16 Javascript
通过修改referer下载文件的方法
2008/05/11 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
详解Nodejs基于mongoose模块的增删改查的操作
2016/12/21 NodeJs
Angularjs在360兼容模式下取数据缓存问题的解决办法
2017/06/22 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
使用Node.js在深度学习中做图片预处理的方法
2019/09/18 Javascript
Python网站验证码识别
2016/01/25 Python
python3 实现的人人影视网站自动签到
2016/06/19 Python
python 统计代码行数简单实例
2017/05/04 Python
Python之py2exe打包工具详解
2017/06/14 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
Python对excel文档的操作方法详解
2018/12/10 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
机电一体化职业规划书
2014/01/07 职场文书
网吧消防安全制度
2014/01/28 职场文书
党员公开承诺书内容
2014/05/20 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
商务司机岗位职责
2015/04/10 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书