Gallery.js: javascript幻灯片播放独立插件Gallery.js,不依赖第三方库,128行代码写的,轻巧灵活

#Gallery.js 使用说明: 1、gallery为大容器,wrapper为图片容器,dot为点容器,注意wrapper和dot容器要保持在同行,如下：

<div class='gallery'>
	<div class='wrapper'></div><div class='dot'></div>
</div>

JS渲染之后模板为

<div class='gallery'>
	<div class='wrapper'>
		<a href='http://www.baidu.com' target='_self'><img src='xxxx.png' width='100%' height='100%'></a>
		<a href='http://www.baidu.com' target='_self'><img src='xxxx.png' width='100%' height='100%'></a>
		<a href='http://www.baidu.com' target='_self'><img src='xxxx.png' width='100%' height='100%'></a>
		<a href='http://www.baidu.com' target='_self'><img src='xxxx.png' width='100%' height='100%'></a>
	</div>
	<div class='dot'>
		<span></span><span></span><span></span><span></span>
	</div>
</div>

Javascript代码

<script>
var data = [{img:'images/a.png', link:'http://www.baidu.com', target:'_self'},
			{img:'images/b.png', link:'http://www.qq.com',  target:'_self'},
			{img:'images/c.png', link:'http://www.163.com', target:'_self'}];
	Gallery.pc({selector:'.gallery .wrapper',data:data,duration:3000,dotTag:'span'});	
</script>

参数说明：

selector:为CSS选择器
duration:图片切换时间间隔,单位ms
dotTag:dot容器里子标签,默认为span标签
data:填充的图片信息,img为图片路径,link跳转地址,target打开窗口类型如_self,_blank

详情请阅读demo.html文件

王竞闲 / Gallery.js

简介

发行版

贡献者

近期动态

王竞闲 / Gallery.js .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

王竞闲 / Gallery.js