幻灯片/轮播
jQuery超级简单响应式幻灯片插件
PetitQ
这是一款设计的非常简单非常实用的 jQuery 幻灯片插件。现在的幻灯片插件层出不穷，这款 jQuery 幻灯片插件返璞归真，使用不到 1000 字节完成了幻灯片所需的必要功能。小巧玲珑，简单实用。它的特点有：
简单小巧。该 jQuery 幻灯片插件的压缩版本的 js 文件只有 991 字节大小。非常适合于手机等移动设备的使用
也想出现在这里？联系我们吧
支持键盘导航。可以使用键盘的左右方向键来控制幻灯片
支持所有的内容。幻灯片中的内容可以是图片、文字、视频或其他内容
跨浏览器支持。该幻灯片插件可以在最新版本的 Chrome, Safari, Firefox, Opera 和 IE7+浏览器中工作
响应式设计
使用方法:
正如插件的名字一样，该 jQuery 幻灯片插件的设置非常简单。创建一个 class 为 slider 的 div 元素，里面放置图片和文本即可。如果你的图片或文内容的高度不一样，该插件会自动平滑的放大或缩小所需的高度。
<div class="slider">
<img src="images/image1.jpg" />
<img src="images/image2.jpg" />
<div class="just_text">This one's just text.</div>
<img src="images/image3.jpg" /><div><img src="images/image4.jpg" /><span class="caption">This one has a caption</span></div></div>
要使用该 jQuery 幻灯片插件还要在页面中引入必要的 JS 和 CSS 文件。
<link rel="stylesheet" href="css/sss.css" type="text/css" media="all">
<script src="http://libs.useso.com/js/jquery/1.9.0/jquery.min.js"></script>
<script src="js/sss.min.js"></script>
然后使用下面的方法调用插件：
jQuery(function($) {
$('.slider').sss();
});
可用参数:
$('.slider').sss({
slideShow : true, // Set to false to prevent SSS from automatically animating.
startOn : 0, // Slide to display first. Uses array notation (0 = first slide).
transition : 400, // Length (in milliseconds) of the fade transition.
speed : 3500, // Slideshow speed in milliseconds.
showNav : true // Set to false to hide navigation arrows.
});
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
