超炫酷碎片化轮播图(原创)

所属分类:媒体-幻灯片和轮播图

 35013  459  查看评论 (20)
分享到微信朋友圈
X
超炫酷碎片化轮播图(原创) ie兼容9

请使用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'], //图片集合 
});
相关插件-幻灯片和轮播图

JS超炫切换效果焦点图代码

超炫切换效果焦点图代码,多种切换方式,兼容性好。
  幻灯片和轮播图
 33627  329

带进度条的jQuery轮播图

带进度条jQuery轮播图,可左右切换、按钮切换
  幻灯片和轮播图
 37721  346

jquery超炫3D自动旋转点击图片轮播图片切换焦点图

jquery超炫3D自动旋转点击图片轮播图片切换焦点图
  幻灯片和轮播图
 75997  538

jQuery自适应滑块轮播图插件zpSlide

zpSlide滑块集轮播图幻灯片,滑块集轮播图个数可自定义,并完全自适应于手机端、ipad、电脑端
  幻灯片和轮播图
 25230  251

讨论这个项目(20)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    储电池 0
    2019/9/17 15:00:40
    能修改自适应全屏宽么?可以给报酬 联系QQ:514204566 回复
    【 】 0
    2018/8/9 11:45:12
    怎么自适应全屏宽 回复
    末お初 0
    2018/7/5 14:11:49
    火狐有兼容行问题
    回复
    是我的海 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
        这个方法是写在哪的?
    回复
    hand 0
    2018/5/3 11:11:52
    怎么让轮播自适应宽度啊? 回复
    秋枫. 0
    2018/5/2 15:18:08
    鼠标悬浮可以暂停切换吗? 回复
    lijek800c 0
    2018/3/27 14:29:25
    很好用,感谢分享!
        秋枫.0
        2018/5/2 15:17:07
        鼠标悬浮可以暂停切换吗?
    回复
    妖泉 0
    2018/2/11 10:44:47
    Colin 0
    2018/1/6 17:42:02

    怎么给图片添加超链接?

        一方一方0
        2018/1/31 14:26:31

        哎嘿,这个没考虑过

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复