jQuery超级简单的响应式幻灯片插件

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > jQuery超级简单的响应式幻灯片插件
jQuery超级简单的响应式幻灯片插件
分享:

    插件介绍

    这是一款设计的非常简单非常实用的jQuery幻灯片插件。现在的幻灯片插件层出不穷,这款jQuery幻灯片插件返璞归真,使用不到1000字节完成了幻灯片所需的必要功能。

    浏览器兼容性

    浏览器兼容性
    时间:02-25
    阅读:

简要教程

这是一款设计的非常简单非常实用的jQuery幻灯片插件。现在的幻灯片插件层出不穷,这款jQuery幻灯片插件返璞归真,使用不到1000字节完成了幻灯片所需的必要功能。小巧玲珑,简单实用。它的特点有:

  • 简单小巧。该jQuery幻灯片插件的压缩版本的js文件只有991字节大小。非常适合于手机等移动设备的使用。
  • 支持键盘导航。可以使用键盘的左右方向键来控制幻灯片。
  • 支持所有的内容。幻灯片中的内容可以是图片、文字、视频或其他内容。
  • 跨浏览器支持。该幻灯片插件可以在最新版本的Chrome, Safari, Firefox, Opera和IE7+浏览器中工作。
  • 响应式设计。

使用方法

正如插件的名字一样,该jQuery幻灯片插件的设置非常简单。创建一个class为sliderdiv元素,里面放置图片和文本即可。如果你的图片或文内容的高度不一样,该插件会自动平滑的放大或缩小所需的高度。

<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.
});