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

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

使用方法

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

HTML结构

该轮播图使用一个

元素来包裹一组图片。

初始化插件

在页面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"

html图片百叶窗轮播,纯js百叶窗效果轮播图插件相关推荐

前端图片压缩上传(纯js的质量压缩，非长宽压缩)
前端图片压缩上传(纯js的质量压缩,非长宽压缩) 此demo为大于1M对图片进行压缩上传若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下: <!DOCTYPE html> ...
html右移动动画效果,图片的左右移动，js动画效果实现代码
图片的左右移动,js动画效果实现代码图片的左右移动,动画效果的实现 =(xk+xp)/2) { if (smer == 1) step--; else step++; } else { if (sm ...
html js 循环提示框,纯js超酷消息提示框插件notice.js
notice.js是一款纯js超酷消息提示框插件.notice.js为纯js编写,没有任何依赖文件.通过它可以在页面上制作出漂亮的toast消息通知框效果.该js消息提示框插件的特点还有: 支持4中情 ...
图片竖轮播html,JS实现纵向轮播图（初级版）
本文实例为大家分享了JS实现纵向轮播图的具体代码,供大家参考,具体内容如下描述: 纵向buton或者底部数字控制轮播,可以实现自动轮播(注释了,使用的话将其注释消掉),核心知识是数据驱动图像的透明度 ...
html原生js实现图片轮播,原生js实现简单轮播图
本文实例为大家分享了js实现简单轮播图的具体代码,供大家参考,具体内容如下一.写入网页基本结构 body: 网页的最外部设置一个id为wrap的容器,取代body,这样方便我们做一些初始化 css: ...
纯JS实现左右滑动轮播图
效果图 (完整代码在最下面) 轮播图的功能要求每次只显示一张图片轮播图需要实现左右无缝切换需要实现跳转(放在圆点显示对应图片) 当前图片的小圆点样式需要突出当鼠标放在图片上时,轮播停止在切换 ...
html5实现图片打散功能,【HTML+js】微信微博九宫格图拆分器
小弟无才,复下来是这样的,运行不了 .wx_button { border-spacing:0px; border-style: solid; border-color: #38f; border-w ...
html图片3djs轮播,原生js实现3D轮播图
3D轮播图是我做过复杂的图片轮播了,由于是利用坐标,层级之间的关系,所以实现起来原理比较简单但是bug巨多,在推推拖拖了好久后,下定决心重新整理成博客,与大家分享! 首先分析一下3D图片轮播的功能需求 ...
html图片重叠轮播,原生JS实现层叠轮播图
又是轮播?没错,换个样式玩轮播. HTML: wtf < > CSS: .box {width: 1200px; height: 300px; transform-style: perse ...

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

html图片百叶窗轮播,纯js百叶窗效果轮播图插件相关推荐

最新文章

热门文章