码迷,mamicode.com
首页 > Web开发 > 详细

ResponsiveSlides.js最轻量级的幻灯片插件

时间:2015-06-23 19:32:10      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:

摘要:ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件它支持包括IE6在内的几乎所有的浏览器,在IE6中还支持最大宽度属性,但在其它浏览器中并不原生支持。

ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin)。它支持包括IE6在内的几乎所有的浏览器,在IE6中还支持最大宽度属性,但在其它浏览器中并不原生支持。你需要做的只是链接jquery并且把图片裁剪为相同大小。

技术分享

你可以点击链接或者图片观看效果

 

和其他幻灯演示插件相比最大的特点:

1.文件较小(通过缩减和gz压缩只有792字节)

2.功能简单(R.js只支持两种模式:图片自动淡出淡入和使用页码标签来手动切换图片。)

用法:

第一步:添加链接

  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script
  2. <script src="responsiveslides.min.js"></script

第二步:添加标签

  1. <div id="slides"
  2.   <img src="1.jpg" alt="" /> 
  3.   <img src="2.jpg" alt="" /> 
  4.   <img src="3.jpg" alt="" /> 
  5. </div

第三步:链接上幻灯(Hook up the slideshow)

  1. <script
  2.   $(function () { 
  3.     $("#slides").responsiveSlides(); 
  4.   }); 
  5. </script

第四步:自定义设置

  1. $("#slides").responsiveSlides({ 
  2.   speed: 4000, //整数:幻灯片切换间隔时间,单位是ms 
  3.   fade: 1000, //整数:淡入淡出的时间, in milliseconds 
  4.   auto: true, //布尔类型:是否手动切换图片(“auto:false”会自动添加页面标签)
  5.   maxwidth: 800, //整数:幻灯片和图片区域的最大宽度,单位是像素px
  6.   namespace: ‘rs‘ //字符串:修改幻灯片类和id的默认命名空间(比如你想在一个页面添加多个幻灯片时使用) 
  7. }); 

如果你不需要页码属性,这就已经完成了!

修改属性"auto:false" (显示页码标签)效果示例:

技术分享

你可以点击链接或者图片观看效果

下面浏览器已通过测试:

•    Internet Explorer 6,7,8,9

•    Firefox 2,3,6,8

•    Safari 5

•    Chrome 15

•    Opera 11.5

•    iOS Safari

•    Opera Mobile 10.1

•    Opera Mini for iOS

•    IE7 Mobile

•    Firefox Mobile

•    Android browser

•    Kindle browser

(复制的,记录每一天!!!!)

ResponsiveSlides.js最轻量级的幻灯片插件

标签:

原文地址:http://www.cnblogs.com/wupeng88/p/4595991.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!