ResponsiveSlides.js

ResponsiveSlides.js是一個展示同一容器內圖片的輕量級響應式jQuery幻燈片插件(tiny responsive slideshow jQuery plugin)。它支持包括IE6在內的幾乎所有的瀏覽器，在IE6中還支持最大寬度屬性，但在其它瀏覽器中并不原生支持。你需要做的只是鏈接jquery并且把圖片裁剪為相同大小。

特點：

1.文件較小(通過縮減和gz壓縮只有792字節)

2.功能簡單(ResponsiveSlides.js只支持三種模式：圖片自動淡出淡入和使用頁碼標簽，或者左右來手動切換圖片。)

瀏覽器支持：

Internet Explorer 6,7,8,9

Firefox 3,6,8,11

Safari 5,5.1

Chrome 15,20

Opera 11,11.6

iOS Safari

Symbian 3 Webkit

Opera Mobile 10.1

Opera Mini for iOS

IE7, IE9 Mobile

Firefox Mobile

Android 2.3+

Kindle browser

使用方法：

1. 引入文件

[html]

[/html]

2. 添加HTML標記

[html]

[/html]

3. 添加CSS

[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;

}

[/css]

4. 調用

[js]

$(function() {

$(".rslides").responsiveSlides();

});

[/js]

參數：

[js]$(".rslides").responsiveSlides({

auto: true, // Boolean: 設置是否自動播放, true or false

speed: 500, // Integer: 動畫持續時間，單位毫秒

timeout: 4000, // Integer: 圖片之間切換的時間，單位毫秒

pager: false, // Boolean: 是否顯示頁碼, true or false

nav: false, // Boolean: 是否顯示左右導航箭頭(即上翻下翻), true or false

random: false, // Boolean: 隨機幻燈片順序, true or false

pause: false, // Boolean: 鼠標懸停到幻燈上則暫停, true or false

pauseControls: true, // Boolean: 懸停在控制板上則暫停, true or false

prevText: "Previous", // String: 往前翻按鈕的顯示文本

nextText: "Next", // String: 往后翻按鈕的顯示文本

maxwidth: "", // Integer: 幻燈的最大寬度

navContainer: "", // Selector: Where controls should be appended to, default is after the ‘ul’

manualControls: "", // Selector: 聲明自定義分頁導航

namespace: "rslides", // String: 修改默認的容器名稱

before: function(){}, // Function: 回調之前的參數

after: function(){} // Function: 回調之后的參數

});

[/js]

總結

以上是生活随笔為你收集整理的html灵活响应 图片设置,jQuery轻量级响应式图片轮播插件ResponsiveSlides.js(仅1kb)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。