jQuery轻量级响应式图片轮播插件 ResponsiveSlides.js

  • 内容
  • 相关

ResponsiveSlides.js是一个很小的jQuery插件,它使用容器内的元素创建响应式幻灯片插件。它已在Microsoft的Build 2012和Gridset App等网站上使用。ResponsiveSlides.js可与各种浏览器一起使用,包括IE6及更高版本的所有IE版本。它还为IE6和其他本机不支持的浏览器增加了CSS最大宽度支持。唯一依赖项是jQuery(支持1.6及更高版本,经过测试最多1.8.3),并且所有图像的大小均相同。

与其他响应式幻灯片插件的最大不同是文件大小(压缩后压缩为1.4kb,另加了压缩文件)+该文件不会尝试做所有事情。ResponsiveSlides.js基本上只有两种不同的模式:要么只是自动使图像变淡,要么作为具有分页和/或导航功能的响应图像容器在幻灯片之间变淡。

使用方法

1、引入相关的文件

<link rel="stylesheet" href="responsiveslides.css">
<script src="jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>

在使用之前,必需要引入jquery.js,不然幻灯片无法正常运行的。


2、html代码

<ul class="rslides" id="slider1">
    <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
    <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
</ul>

HTML的代码也相当的简单,只需要 li 标签 和 img标签即可。


3、js代码

$(function () {
    $("#slider1").responsiveSlides({
    maxwidth: 800,
    speed: 800,
    pager: true,
    nav: true,
    });
}

js代码中可以设置幻灯片的参数,比如切换时间,停留时间,是否开启导航等等






  文件名稱:ResponsiveSlides.js

  更新時間:16-08-05

  下載声明:

立即下載

下载链接

极速下载

本文标签:

本文标题:jQuery轻量级响应式图片轮播插件 ResponsiveSlides.js

本文链接:https://www.52linglong.com/Effects/174.html

版权声明:若无特殊注明,皆为《小编》原创版权,转载请保留文章出处。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论

1条评论
  1. avatar

    太仓招聘网 Lv.1 Chrome 47.0.2526.106 Chrome 47.0.2526.106 Windows 8.1 x64 Edition Windows 8.1 x64 Edition 回复

    正在找 谢谢博主!

    江苏省苏州市 电信