?

圖片?切換?效果

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

?

?

和其他幻燈演示插件相比最大的特點：

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

2.功能簡單(R.js只支持兩種模式：圖片自動淡出淡入和使用頁碼標簽來手動切換圖片。)

用法：

第一步：添加鏈接

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

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

第二步：添加標簽

<divid="slides">

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

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

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

</div>

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

<script>

$(function?()?{?

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

?});

</script>

第四步：自定義設置

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

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

fade:?1000,?//整數：淡入淡出的時間,?in?milliseconds

auto:?true,?//布爾類型：是否手動切換圖片(“auto:false”會自動添加頁面標簽)

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

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

時使用)

});

?

如果你不需要頁碼屬性，這就已經完成了！

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

?

轉載于:https://blog.51cto.com/7896057/1344786

總結

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

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