幻灯片/轮播
纯js百叶窗效果轮播图插件
PetitQ
这是一款纯 js 百叶窗效果轮播图插件。该 js 轮播图在图片切换时的效果类似于多张图片展开合成一张完整的大图。该轮播图由纯 js 编写，兼容 ie8 浏览器。
使用方法:
在页面中引入 imgSwitch.min.js 文件。
也想出现在这里？联系我们吧
<script src=""path/to/js/imgSwitch.min.js"></script>
HTML 结构:
该轮播图使用一个<div>元素来包裹一组图片。
<div id="imgContainer">
<img src="images/1.jpg"/>
<img src="images/2.jpg"/>
<img src="images/3.jpg"/>
<img src="images/4.jpg"/>
<img src="images/5.jpg"/>
<img src="images/6.jpg"/>
<img src="images/7.jpg"/>
</div>
初始化插件:
在页面 DOM 元素加载完毕之后，可以通过创建一个 imgSwitch()对象来实例化一个轮播图。
window.onload=function(){
new imgSwitch("imgContainer",{
Type:12,
Width:943,
Height:354,
Pause:3000,
Speed:"fast",
Auto:true,
Navigate:"numberic",
NavigatePlace:"outer",
PicturePosition:"left"})
}
配置参数:
该轮播图可用的配置参数有：
Auto:true,//是否自动播放
Pause:3000,//暂停的时间
Type:1,//播放类型
Navigate:"numberic",//导航，有三种，分别为no(无),numberic(数字),picture(图片)
Width:874,//图片的宽度
Height:211,//图片的高度
Speed:"normal",//转变的速度
PicturePosition:"inner",
NavigatePlace:"inner"
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
