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

摘要: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

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

时间: 2024-11-05 11:37:02

ResponsiveSlides.js最轻量级的幻灯片插件的相关文章

ResponsiveSlides javascript 幻灯片插件

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

支持移动触摸设备的简洁js幻灯片插件

lory是一款支持移动触摸设备的简洁的js幻灯片插件.该幻灯片插件可以通过纯js调用,也可以将该幻灯片插件作为jquery插件来使用.该幻灯片的过渡动画具有硬件加速功能,并且可以定制是否使用easing效果. 以下列出该幻灯片的一些特点: 支持移动触摸设备. 简单,界面整洁,纯js调用. 可以作为jQuery插件来使用. 过渡效果支持硬件加速. 可定制easing效果. 可无限循环,制作为旋转木马. 丰富的回调函数. 效果演示:http://www.htmleaf.com/Demo/201504

jQuery幻灯片插件Skippr

Skippr是一款带左右箭头,索引按钮,滑动切换效果并且轻量.快速的幻灯片 设置 引入jquery.skippr.css.jquery.js.jquery.skippr.js 注意jQuery必须在jquery.skippr.js之前 <head> <link href="css/jquery.skippr.css" rel="stylesheet" type="text/css" > <script src=&qu

Skippr – 轻量、快速的 jQuery 幻灯片插件

Skippr 是一个超级简单的 jQuery 幻灯片插件.只是包括你的网页中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了.Skippr 能够自适应窗口宽度,而且导航是独特的条形导航. 您可能感兴趣的相关文章 太赞了!超炫的页面切换动画效果[附源码下载] 创意无限!一组网页边栏过渡动画[附源码下载] 好东西!动感的页面加载动画效果[附源码下载] 使用 CSS3 实现3D图片滑块效果[附源码下载] 时尚设计!三种奇特网格加载效果[附源码下载] 源码下

带多种过渡动画的响应式jQuery幻灯片插件

Nivo-Slider是一款非常强大的响应式jQuery幻灯片插件.该幻灯片插件内置有16种不同的动画过渡效果.它提供了丰富的参数来控制幻灯片的播放.它使用简单,并且可以兼容IE8浏览器. 在线预览   源码下载 使用方法 使用Nivo-Slider幻灯片需要引入nivo-slider.css,jQuery(1.7+)和jquery.nivo.slider.js文件. 1 2 3 <link rel="stylesheet" href="css/nivo-slider.

适合移动手机使用的jQuery幻灯片插件

jflex是一款小巧的适合移动手机使用的jQuery幻灯片插件.该幻灯片插件支持移动触摸,支持鼠标拖拽切换,还支持带进度条的自动播放模式.它是否的小球,使用非常简单. 在线预览   源码下载 使用方法 使用该幻灯片插件需要引入jQuery,jflex.min.js和jflex.min.css文件. 1 2 3 <link rel="stylesheet" href="css/jflex.min.css" type="text/css">

强大实用的jQuery幻灯片插件Owl Carousel

演 示 下 载 简介 Owl Carousel 是一个强大.实用但小巧的 jQuery 幻灯片插件,它具有一下特点: 兼容所有浏览器 支持响应式 支持 CSS3 过度 支持触摸事件 支持 JSON 及自定义 JSON 格式 支持进度条 支持自定义事件 支持延迟加载 支持自适应高度 …… Owl Carousel 提供了众多的参数.回调函数及自定义事件(具体请往下浏览),所以它几乎可以满足你的所有要求. 兼容 浏览器兼容:兼容所有浏览器,包括 IE6.IE7. jQuery 兼容:兼容 1.7 及

SlidesJS - 老牌的响应式 jQuery 幻灯片插件

SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作出优雅的幻灯片效果. 插件下载     效果演示 使用示例: <!doctype html> <head> <style> /* Prevents slides from flashing */ #slides { display:none; } </style>

基于jQuery幻灯片插件Slippry

分享一款基于jQuery幻灯片插件Slippry是一款基于Slippry.js插件实现的图片切换特效代码.效果图如下 : 在线预览   源码下载 实现的代码. html代码: <div class="htmleaf-content"> <ul id="thumbnails"> <li> <a href="#slide1"> <img src="img/image-1.jpg"