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

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

 12729  135  查看评论 (17)
超炫酷碎片化轮播图(原创) 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'], //图片集合 
});
相关插件-幻灯片和轮播图

anoSlide演示8种焦点图轮播效果

anoSlide演示8种焦点图轮播效果
  幻灯片和轮播图
 7834  44
  幻灯片和轮播图
 92367  121
  幻灯片和轮播图
 25245  151

js垂直轮播广告幻灯片

js垂直轮播广告幻灯片
  幻灯片和轮播图
 14533  83

讨论这个项目(17)回答他人问题或分享插件使用方法奖励jQ币

    末お初 0
    2018/7/5 14:11:49
    火狐有兼容行问题
    回复
    是我的海 0
    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%的宽度
        是我的海0
        2018/7/3 23:59:03
        size: {
            width: window.screen.width-20,
            height: 560
        }

        暂时只想到用这个办法,让其适应浏览器窗口,减掉的20是滚动条的宽

    回复
    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

        哎嘿,这个没考虑过

    回复
    焱潆回暖 0
    2018/1/4 14:59:57
    可以添加超链接吗
        慢灵魂1
        2018/2/27 11:24:57
        给i标签添加个class, 轮播图添加点击事件就可以获取信息了,别忘了给前后键和下方的进度点添加阻止冒泡
    回复
             0
    2017/12/22 20:02:37

    第一个轮播左右按键点了没反应 有解决方法吗大哥

        一方一方0
        2017/12/25 14:51:12

        不是没反应,是方块没复位之前,禁止再次切换

        爱吃怎么不长胖0
        2018/1/5 20:38:33

        这也是判断动画,不然很容易鬼畜

    回复
取消回复