插件描述：面向封装的轮播图带进度，可自定参数，一个页面实例化多个
请使用new函数实例化轮播图，可实例化多个
var banner = new FragmentBanner({
container: "#banner1", //选择容器 必选
imgs: ['images/1.jpg', 'images/2.jpg', 'images/3.jpg', 'images/4.jpg', 'images/5.jpg'], //图片集合 必选
size: {
width: 1000,
height: 560
}, //容器的大小 可选
//行数与列数 可选
grid: {
line: 12,
list: 14
},
index: 0, //图片集合的索引位置 可选
type: 2, //切换类型 1 ， 2 可选
boxTime: 5000, //小方块来回运动的时长 可选
fnTime: 10000 //banner切换的时长 可选
});
/*** 只填两个必要参数也是可以的 */
var banenr2 = new FragmentBanner({
container: "#banner2", //选择容器 必选
imgs: ['images/1.jpg', 'images/2.jpg', 'images/3.jpg', 'images/4.jpg', 'images/5.jpg'], //图片集合
});
PREVIOUS:
NEXT:
相关插件-幻灯片和轮播图
讨论这个项目（22）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
是我的海 1
2018/7/4 11:06:20
很喜欢这个插件，为了项目需求，新增了图片的跳转，实现方法就是在创建i标签时改成a，然后仿写setCss(),自定义一个setStyle() 这样就能对其设置href属性
还有就是在 banner.js 中，在下面的数组添加一个 href 成员
this.whiteList = ['container','controller','size','imgs','size','grid','index','fnTime','boxTime','type','href'];
调用时
var banner = new FragmentBanner({
container: "#banner1",
imgs: ['images/a0.jpg', 'images/a2.png'],
href: ['https://www.baidu.com', 'https://www.taobao.com'], //例：在这里写上对应图片的链接，就能实现跳转
});因为是仿写难度不大，代码太多，就不发了，看得懂源码就能改，只提供了实现的思路
是我的海 0
2018/7/3 16:22:26
-
请求楼主增加自适应宽度，很需要100%的宽度
是我的海1
2018/7/3 23:59:03
size: {
width: window.screen.width-20,
height: 560
}暂时只想到用这个办法，让其适应浏览器窗口，减掉的20是滚动条的宽
【 】0
2018/8/9 11:44:41
-
这个方法是写在哪的？
远在天边ぃ0
2021/4/28 15:45:39
-
这个方法不行啊。。。
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
