?

圖片?切換?效果

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

?

?

和其他幻燈演示插件相比最大的特點(diǎn)：

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

2.功能簡(jiǎn)單(R.js只支持兩種模式：圖片自動(dòng)淡出淡入和使用頁(yè)碼標(biāo)簽來手動(dòng)切換圖片。)

用法：

第一步：添加鏈接

<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<scriptsrc="responsiveslides.min.js"></script>

第二步：添加標(biāo)簽

<divid="slides">

<imgsrc="1.jpg"alt=""/>

<imgsrc="2.jpg"alt=""/>

<imgsrc="3.jpg"alt=""/>

</div>

第三步：鏈接上幻燈（Hook?up?the?slideshow）

<script>

$(function?()?{?

$("#slides").responsiveSlides();?

?});

</script>

第四步：自定義設(shè)置

$("#slides").responsiveSlides({?

speed:?4000,?//整數(shù)：幻燈片切換間隔時(shí)間，單位是ms?

fade:?1000,?//整數(shù)：淡入淡出的時(shí)間,?in?milliseconds

auto:?true,?//布爾類型：是否手動(dòng)切換圖片(“auto:false”會(huì)自動(dòng)添加頁(yè)面標(biāo)簽)

maxwidth:?800,?//整數(shù)：幻燈片和圖片區(qū)域的最大寬度，單位是像素px

namespace:?'rs'?//字符串：修改幻燈片類和id的默認(rèn)命名空間(比如你想在一個(gè)頁(yè)面添加多個(gè)幻燈片

時(shí)使用)

});

?

如果你不需要頁(yè)碼屬性，這就已經(jīng)完成了！

修改屬性"auto:false"?(顯示頁(yè)碼標(biāo)簽)效果示例：http://responsive-slides.viljamis.com/

?

轉(zhuǎn)載于:https://blog.51cto.com/7896057/1344786

總結(jié)

以上是生活随笔為你收集整理的ResponsiveSlides.js——小于1k的轻量级幻灯片演示插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。