响应式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. 没有图片

    2011.10.23

    WordPress日志分栏显示方法初探

    通常我们见到的WordPress博客显示的文…

  2. 没有图片

    2010.07.17

    WordPress 3.0 中文包迟迟不发的一点感慨

    WordPress 3.0 英文版早已发布很…

  3. 没有图片

    2012.11.03

    五个很实用的HTML5接口

    1.Element.classList cl…

  4. 没有图片

    2012.12.19

    WordPress循环调用分类及分类下文章标题

    WordPress各种调用都已经很熟悉了,但…

  5. 没有图片

    2009.12.06

    微软浏览器 Pivot 使用体验

    今天下载了微软的最新版本浏览器 Pivot,…

  6. 没有图片

    2009.07.09

    Twitter近来无法访问 更新你的Twitter的解决办法

    作为目前最受欢迎的微博客系统Twitter,…

评论

还没有评论。