html图片百叶窗轮播,纯js百叶窗效果轮播图插件

这是一款纯js百叶窗效果轮播图插件。该js轮播图在图片切换时的效果类似于多张图片展开合成一张完整的大图。该轮播图由纯js编写,兼容ie8浏览器。

使用方法

在页面中引入imgSwitch.min.js文件。

HTML结构

该轮播图使用一个

元素来包裹一组图片。

1.jpg

2.jpg

3.jpg

4.jpg

5.jpg

6.jpg

7.jpg

初始化插件

在页面DOM元素加载完毕之后,可以通过创建一个imgSwitch()对象来实例化一个轮播图。

window.οnlοad=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"

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值