jquery实现图片翻页效果

代码如下:

$(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;

}

赞 (0)

相关推荐

  • 使用jQueryMobile实现滑动翻页效果的方法

    使用jQueryMobile实现滑动翻页效果的方法

    本文实例讲述了使用jQueryMobile实现滑动翻页效果的方法.分享给大家供大家参考.具体分析如下: 滑动手势在移动设备是很流行的,在移动设备中滑动翻页中很常见 虽然这个功能可以在jQueryMobile中实现,但是个人与之前一篇[jQuery手机浏览器中拖拽动作的艰难性分析]中的观点一致,由于这是在手机浏览器中浏览,而不是安卓的一个独立APP,所以不要经常除点击以外的移动设备手势,以免跟手机浏览器与手机系统本身的手势发生冲突. 那么,使用jQueryMobile实现滑动翻页的效果到底怎么做呢

  • jquery实现的点击翻书效果代码

    jquery实现的点击翻书效果代码

    本文实例讲述了jquery实现的点击翻书效果代码.分享给大家供大家参考,具体如下: 这是自写一个翻书的Js效果,基于jquery-1.4.2.min.js插件实现,还正在完善中,希望大家能喜欢,我觉得不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-click-cha-page-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi

  • jQuery实现手机版页面翻页效果的简单实例

    如下所示: var page = 1; var size = 6; var mark = 0; var url = "{pigcms{:U('Order/index', array('page'=>'d%'))}"; var commentTpl = '<div style="margin-top: 10px">\ <button data-oid="<order_id>" style="width:

  • SQL Server误区30日谈 第6天 有关NULL位图的三个误区

    这样还能减少CPU缓存命中失效的问题(点击这个链接来查看CPU的缓存是如何工作的以及MESI协议).下面让我们来揭穿三个有关NULL位图的普遍误区. 误区 #6a:NULL位图并不是任何时候都会用到 正确 就算表中不存在允许NULL的列,NULL位图对于数据行来说会一直存在(数据行指的是堆或是聚集索引的叶子节点).但对于索引行来说(所谓的索引行也就是聚集索引和非聚集索引的非叶子节点以及非聚集索引的叶子节点)NULL位图就不是一直有效了. 下面这条语句可以有效的证明这一点: 复制代码 代码如下:

  • jquery实现图片翻页效果

    复制代码 代码如下: $(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({}

  • android中图片翻页效果简单的实现方法

    android中图片翻页效果简单的实现方法

    复制代码 代码如下: public class PageWidget extends View {    private Bitmap foreImage;    private Bitmap bgImage;    private PointF touchPt;    private int screenWidth;    private int screenHeight;    private GradientDrawable shadowDrawableRL;    private Gra

  • jQuery实现点击图片翻页展示效果的方法

    本文实例讲述了jQuery实现点击图片翻页展示效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>基于jQuery实现的点击图片翻页展示效果</title> <meta http-equiv="content-type&q

  • JS模仿腾讯图片站的图片翻页按钮效果完整实例

    JS模仿腾讯图片站的图片翻页按钮效果完整实例

    本文实例讲述了JS模仿腾讯图片站的图片翻页按钮效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" conten

  • javaScript+turn.js实现图书翻页效果实例代码

    javaScript+turn.js实现图书翻页效果实例代码

    为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 turn.js 如何使用!!!!!!! 文章最后提供源码下载,结合源码看本文,turn.js更简单! 首先附上个人的文件路径 对于css   和 js文件不需要过多的解释   在这里要注意的是pages文件夹   这里个文件夹下放的是需要预览的图片文件   

  • Android利用悬浮按钮实现翻页效果

    Android利用悬浮按钮实现翻页效果

    今天给大家分享下自己用悬浮按钮点击实现翻页效果的例子. 首先,一个按钮要实现悬浮,就要用到系统顶级窗口相关的WindowManager,WindowManager.LayoutParams.那么在AndroidManifest.xml中添加权限: <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" /> 然后,我们要对WindowManager,WindowManager.Layout

  • js图片翻书效果代码分享

    js图片翻书效果代码分享

    这是一款基于javascript实现图片翻书效果代码,图片可以从左右两个方向进行切换,用户还可以自定义对应图片的标题与文字说明,是一款非常实用的图片特效源码. 七夕情人节也可以是表白的神器,放一些回忆的照片,还可以永久保存,是不是很有心意,推荐给大家,有需要的小伙伴可以学习学习. 运行效果图: 大家可以先运行一下    -------------------------------------效果运行----------------------------------------- 为大家分享的

  • ios电子书翻页效果代码详解

    ios电子书翻页效果代码详解

    近实现了一个完整的电子书阅读器,支持txt和epub格式的电子书阅读,其中epub支持图文混排的方式展示.本文主要谈谈其中两种翻页效果的实现,分别为仿真翻页和水平滑动翻页. 仿真翻页 最合适的方案就是使用系统提供的UIPageviewcontroller了,不过默认的UIpageviewcontroller翻页时背面是白色的,而阅读器通常都会有背景色或背景图片,翻页时用户体验就很糟糕,比如就像下面这样 所以接下来主要说说如何修改背面颜色以达到美观的翻页效果. UIpageviewcontroll

随机推荐