ResponsiveSlides.js——小于1k的轻量级幻灯片演示插件
?
圖片?切換?效果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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 【2013年总结】 向着IT前进
- 下一篇: Android 混淆打包