一个基于jQuery的相册轮播插件。

一个基于 jQuery 的相册轮播插件。

Live Demo

使用git clone或download zip下载插件源码

在项目中引入 jQuery v1.9.1 及以上版本

添加html结构

<div class="album"> <div class="left-slide"> <div class="hd"> <ul></ul> </div> <div class="bd"> <ul></ul> </div> <button class="prev hide"> <</button> <button class="next hide">></button> </div> <div class="right-slide"> <div class="bd"> <ul></ul> </div> <button class="prev hide">∧</button> <button class="next hide">∨</button> </div> </div>

引入插件相关css文件

<!-- 地址根据需要修改 --> <link rel="stylesheet" href="./../albumCarousel.min.css">

引入插件js文件

<!-- 地址根据需要修改 --> <script src="./../albumCarousel.min.js"></script>

初始化插件

var albumData = [ ["https://dummyimage.com/928x580/808F7C/fff", "https://dummyimage.com/928x580/66BAB7/fff"], ["https://dummyimage.com/928x580/211E55/fff", "https://dummyimage.com/928x580/f60/fff", "https://dummyimage.com/928x580/7B90D2/fff" ], ["https://dummyimage.com/928x580/ff5566/fff", "https://dummyimage.com/928x580/00896C/fff"], ["https://dummyimage.com/928x580/C1328E/fff"], ["https://dummyimage.com/928x580/A8D8B9/fff", "https://dummyimage.com/928x580/f60/fff"], ["https://dummyimage.com/928x580/f60/fff", "https://dummyimage.com/928x580/f60/fff", "https://dummyimage.com/928x580/f60/fff" ] ]; $('.album').albumCarousel({ albumData: albumData }); 参数设置

var defaluts = { albumData: [], //相册数据，接收一个二维数组 speed: 3000 //自动播放速度，默认3s切换 }; To Do 图片切换速度 自动/手动播放控制 相册切换滑动效果 优化CSS