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

    2009.12.07

    最专业的PHP在线相册程序 Imagevue 下载+教程

    网上看到一个效果特别炫的在线Flash相册,…

  2. 没有图片

    2012.03.03

    精选15个CSS框架

    1.960 Grid System 960网…

  3. 没有图片

    2009.07.28

    UUSee半年免费版卡巴斯基2009

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

  4. 没有图片

    2013.11.04

    如何开启 Windows 8.1 远程桌面

    Windows 8.1 远程桌面默认是被系统…

  5. 没有图片

    2012.04.28

    WordPress自定义域使用技巧实例

    关于Wordpress自定义域的教程网络上已…

  6. 没有图片

    2012.12.14

    免费WordPress杂志主题: BooThemes

    前几天已经与大家分享了一款免费的WordPr…

评论

还没有评论。

About

马拉松运动员,沉迷于跑步;关注科技前沿,关注互联网!与跑者、程序员、设计师为伍,一起跑步健身,一起编写程序,为自由而战!