jQuery幻灯片插件:jq-tiles使用实例介绍

插件使用方法:

1、可选参数,我就不翻译了,以免误导大家:

Options:
{
x : 4, // # of tiles in x axis, 20 max
y : 4, // # of tiles in y axis, 20 max
effect : ‘default’,
fade : false, // fade images in addition to the tiles effect
random : false, // animate tiles in random order
reverse : false, // start animation from opposite direction
backReverse : false, // reverse the animation when going back in the slideshow (useful for some effects)
rewind : false, // reverse animation at a certain percentage in time
auto : false, // Start the slideshow on load
loop : false, // Start slideshow again when it finishes
slideSpeed : 3500, // time between slides
tileSpeed : 800, // time to clear all tiles
cssSpeed : 300, // css3 transition speed [100,200,300,400,500,600,700,800,900,1000],
nav : true, // Add navigation
navWrap : null, // Add the navigation to an existing element
bullets : true, // Show bullets, if false the show pagination with numbers
thumbs : true, // Show thumbnails when hovering nav
thumbSize : 25, // Thumbnail size (percentage of the original image)
timer : true // show or hide the timer bar
beforeChange : function() {}, // Runs before changing the image
afterChange : function() {} // Runs after the tiles have cleared
onSlideshowEnd : function() {} // Runs when the slideshow finishes ( “loop” must be set to false )
}

2、使用方法:

start:

$(‘.slider’).tilesSlider(‘start’)

stop:

$(‘.slider’).tilesSlider(‘stop’)

next:

$(‘.slider’).tilesSlider(‘next’, callback)

prev:

$(‘.slider’).tilesSlider(‘prev’, callback)

3、使用示例:

HTML:

<div class=”slider”>
<img src=”img1.jpg”/> <!– No description –>
<img src=”img2.jpg”/><p>Description image two</p>
<img src=”img3.jpg”/><p>Description image three</p>
</div>

CSS:

.slider { width: 600px; height: 400px; }

jQuery:

$(‘.slider’).tilesSlider({ random: true })

4、WordPress中使用注意事项:

由于原插件中会对描述的p标签包裹CSS样式,而WordPress源码编辑器中换行的话,就会自动追加p标签,会造成幻灯片显示效果不佳。我简单修改了一下,html代码中将描述的p标签赋予一个CSS类,如<p class=”tiles-desc”>Description image two</p>,再修改jquery.tiles.js文件中_setupDescriptions函数,将函数中两处 (‘p’) 修改为 (‘p.tiles-desc’) 即可。

5、优化:

页面加载就同步显示幻灯片,会多多少少影响页面载入速度,我的处理方法就是,默认载入一张10kb的图片,将相关js文件放到页面底部,另外,自己写个函数,动态输出html内容,需要的可以参考我的幻灯片页面和js文件,欢迎指导!

时间: 2024-11-07 20:26:08

jQuery幻灯片插件:jq-tiles使用实例介绍的相关文章

jquery幻灯片插件bxslider样式改进实例_jquery

本文实例讲述了jquery幻灯片插件bxslider样式改进方法,分享给大家供大家参考.具体如下: 对比了很多jquery的幻灯片,都觉得不是很好,最后发现bxslider兼容性最好,移动设备支持手动翻动. 但是官方提供的显示效果真的很难看,让人难以接受.最后只能自己DIY了. bxslider官方样式如下:   改造后的样式如下: 第一步:引入bxslider 复制代码 代码如下: <!-- jQuery library (served from Google) -->  <scrip

基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)_jquery

jquery-slider是一款基于JSON格式数据的jQuery幻灯片插件.该幻灯片通过JSON数据来提供图片地址和描述信息等,你可以通过更换JSON数据来动态切换不同的图片. 在线预览     源码下载 使用方法 在页面中引入jquery和slider.js文件和font-awesome字体图标文件. <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-

8款非常棒的响应式jQuery 幻灯片插件推荐_jquery

这篇文章收集了8款优秀的响应式 jQuery 幻灯片插件,它们能够非常容易的集成到 Web 项目中.响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验. Flexslider FlexSlider 是一款非常棒的响应式 jQuery 幻灯片插件,能够自适应屏幕尺寸,呈现漂亮的外观. Blueberry Blueberry 是一款开源的 jQuery 图片幻灯片插件,适用于流体.响应式网页布局. unoslider 特别推

20个非常棒的 jQuery 幻灯片插件和教程分享_jquery

滑块和幻灯片效果是常用的内容展示方式之一,这是一种在有限的网页空间内展示系列项目时非常好的方法.今天这篇文章就与大家分享20个非常棒的 jQuery 幻灯片插件和教程. > Slider Gallery with jQuery Create an Image Rotator with Description (CSS/jQuery) Create a Slick and Accessible Slideshow Using jQuery Simple JQuery Image Slide Sho

8款非常棒的响应式 jQuery 幻灯片插件推荐

这篇文章收集了8款优秀的响应式 jQuery 幻灯片插件,它们能够非常容易的集成到 Web 项目中.响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验. Flexslider FlexSlider 是一款非常棒的响应式 jQuery 幻灯片插件,能够自适应屏幕尺寸,呈现漂亮的外观. Blueberry Blueberry 是一款开源的 jQuery 图片幻灯片插件,适用于流体.响应式网页布局. unoslider 特别推

jQuery DataTables插件自定义Ajax分页实例解析_jquery

一.问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分类效果. 后端的分页接口已经写好了,不涉及条件查询,需要传入页码(pageNo)和页面显示数据条数(pageSize),显示相应页的显示记录,且不能修改后端接口. 二.分析 先来分析下分页实现.一是后端分页:这种情况下,在后端很容易实现,在官网上有示例,不多说明.二是前端分页:前端分页也是支持的,不过需要一次把所有数据都获取到才可以. 看到这里,问题来了.由于后端在目前的情况下是更改不了,

jquery Validation插件表单验证实例

本实例涉及到的验证有: 用户名:长度.字符验证,重复性ajax验证(是否已存在). 密码:长度验证,重复输入密码验证. 邮件:邮件地址验证. 固定电话:中国大陆固定电话号码验证. 手机号:中国大陆手机号码验证. 网址:网站URL地址验证. 日期:标准日期格式验证. 数字:整数.正整数验证,数字范围验证. 身份证:大陆身份证号码验证. 邮政编码:大陆邮政编码验证. 文件:文件类型(后缀)验证,如只允许上传图片. IP:IP地址验证. 验证码:验证码ajax验证. Sep17实例讲解表单验证插件Va

jQuery Mockjax插件模拟Ajax请求实例教程

在实际的开发过程中,前端后台协商好了统一的接口,就各自开始自己的任务了.这时候我有这么一个 Ajax 请求需要从后台获取数据:    代码如下 复制代码 $.ajax({   url: '/products/' }).done(function(res) {   $('#result').html(res); });     但是这个服务可能还没有创建,也许是后台开发那个小伙子(就是那些使用 PHP.Ruby..NET.GoldFusion 等等语言的帅哥们)开小差去了,也许是他忙于其它事情.总

jquery click([data],fn)使用方法实例介绍

大概意思就是触发每一个匹配元素的click事件,本文通过一个实例为大家详细介绍下jquery click([data],fn)的使用方法,感兴趣的朋友可以参考下哈,希望对大家有所帮助   click([[data],fn]) 返回值:jQuery 概述 触发每一个匹配元素的click事件. 这个函数会调用执行绑定到click事件的所有函数. 参数 fnFunctionV1.0 在每一个匹配元素的click事件中绑定的处理函数. [data],fnString,FunctionV1.4.3 dat