【无标题】Camera插件用法

第一步：把该插件所需css和js引用

Css

 

js

 

第二步：写个类名为camera_wrap id名为camera_wrap_1的div

 

第三步：在camera_wrap类名的div中写几个div，并通过data-src，把图片链接写上

 

第四部：通过jquery实现我们效果

 

效果：

 

除了这些我们还可以通过一些属性来改变一些效果

首先是图片上的参数:

• data-src: 图片路径
• data-link: 图片链接
• data-portrait: 显示图片的实际尺寸( "true", "false" )
• data-slideOn: 渐隐效果( "next", "prev", "random" )
• data-target: 链接打开的形式( "_blank", "_new", "_parent", "_self", "_top" )
• data-time: 图片的显示时间( "可直接输入数字" )
• data-video: 取消视频自动播放( "hide" )

以上是图片的参数, 切记每条属性只针对的是一张图片.

下面是JS上的参数, 也就是控制整个幻灯片的

• height: '' 幻灯片的高度
• hover: 鼠标经过幻灯片时暂停(true, false)
• imagePath: 图片的目录
• loader: 加载图标(pie, bar, none)
• loaderColor: 加载图标颜色( '颜色值,例如:#eee' )
• loaderBgColor: 加载图标背景颜色
• loaderOpacity: 加载图标的透明度( '.8'默认值, 其他的可以写 0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1 )
• loaderPadding: 加载图标的大小( 填数字,默认为2 )
• navigation: 左右箭头显示/隐藏(true, false)
• navigationHover: 鼠标经过时左右箭头显示/隐藏(true, false)
• pagination: 是否显示分页(true, false)
• playPause: 暂停按钮显示/隐藏(true, false)
• pauseOnClick: 鼠标点击后是否暂停(true, false)
• portrait: 显示幻灯片里所有图片的实际大小(true, false)
• thumbnails: 是否显示缩略图(true, false)
• time: 幻灯片播放时间( 填数字 )
• transPeriod: 动画速度( 填数字 )