响应式jQuery幻灯片 – ResponsiveSlides.js

responsiveslides.js

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

回到插件ResponsiveSlides.js,他的最大特点就是简单轻巧,使用方便,具体用法如下:

1. Link files

<script src=”http://ajax.useso.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script src=”responsiveslides.min.js”></script>

2. Add Markup

<ul>
<li><img src=”1.jpg” alt=”"></li>
<li><img src=”2.jpg” alt=”"></li>
<li><img src=”3.jpg” alt=”"></li>
</ul>

3. Add CSS

.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}

.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}

.rslides li:first-child {
position: relative;
display: block;
float: left;
}

.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}

4. Hook up the slideshow

<script>
$(function() {
$(“.rslides”).responsiveSlides();
});
</script>

5. Options you can customize

$(“.rslides”).responsiveSlides({
auto: true, // Boolean: Animate automatically, true or false
speed: 500, // Integer: Speed of the transition, in milliseconds
timeout: 4000, // Integer: Time between slide transitions, in milliseconds
pager: false, // Boolean: Show pager, true or false
nav: false, // Boolean: Show navigation, true or false
random: false, // Boolean: Randomize the order of the slides, true or false
pause: false, // Boolean: Pause on hover, true or false
pauseControls: true, // Boolean: Pause when hovering controls, true or false
prevText: “Previous”, // String: Text for the “previous” button
nextText: “Next”, // String: Text for the “next” button
maxwidth: “”, // Integer: Max-width of the slideshow, in pixels
navContainer: “”, // Selector: Where controls should be appended to, default is after the ‘ul’
manualControls: “”, // Selector: Declare custom pager navigation
namespace: “rslides”, // String: Change the default namespace used
before: function(){}, // Function: Before callback
after: function(){} // Function: After callback
});

好了,完成上面五步就可以正常使用了,目前v1.54版本支持4中皮肤选择,我用的是最原始简单的,你也可以在 Github 上查看演示与更新日志…

官方网址:http://responsiveslides.com/
文章引自:http://imevilcat.com/

落花生

认准了方向,就要勇敢地走下去,十年磨一剑,我相信,只要坚持,一切都有可能。

相关日志

  1. 没有图片

    2012.04.05

    Apache虚拟主机管理教程

    Linux系统LAMP服务器配置好之后,我们…

  2. 没有图片

    2009.07.28

    UUSee半年免费版卡巴斯基2009

    以前在用360安全卫士的时候,就用到了安装3…

  3. 没有图片

    2018.11.22

    phpStudy 升级 MySQL 到最新版 MySQL 8.0

    在阿里香港服务器折腾两天宝塔,因为服务器配置…

  4. 2011.04.03

    WordPress自适应宽度主题 LSZ wpbus D2 完美版

    WordPress自适应宽度主题D2完美版的…

  5. 没有图片

    2012.06.15

    简短而实用的WordPress随机日志调用代码

    此段调用代码可以用来制作碰碰运气,也可以用来…

  6. 没有图片

    2010.05.12

    WordPress评论统计的一大Bug

    WordPress目前来看已经很完善了,但菠…

评论

还没有评论。