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 Event学习第九章 鼠标事件
Feb 08 Javascript
JS模拟键盘打字效果的方法
Aug 05 Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
Jan 25 Javascript
create-react-app 修改为多入口编译的方法
Aug 01 Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
Sep 18 Javascript
JQuery的加载和选择器用法简单示例
May 13 jQuery
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
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
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
FCKeditor的安装(PHP)
2007/01/13 PHP
PHP 日期时间函数的高级应用技巧
2009/10/10 PHP
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
js读取json文件片段中的数据实例
2017/03/09 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
2018/12/05 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
vue实现图片预览组件封装与使用
2019/07/13 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
python实现根据图标提取分类应用程序实例
2014/09/28 Python
python 实现让字典的value 成为列表
2019/12/16 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
四好少年事迹材料
2014/01/12 职场文书
社区消防工作实施方案
2014/03/21 职场文书
机关作风建设整改方案
2014/10/27 职场文书
初中中等生评语
2014/12/29 职场文书
工作试用期自我评价
2015/03/10 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
Python异常类型以及处理方法汇总
2021/06/05 Python
聊聊CSS粘性定位sticky案例解析
2022/06/01 HTML / CSS