jQuery超级简单的响应式幻灯片插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款设计的非常简单非常实用的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.
});