carousel整体轮播

发表于   |  更新于   |   分类于   |  

实现整体轮播，鼠标悬停，自动播放可控，继承重写切换效果

git地址
演示

使用步骤

属性说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
this.f= o.fselector; //装轮播的容器 !!
this.selector =   o.selector ; //需要切换的内容 !! 
this.lastbutton = $(o.lastbutton)||null; //上一个 按钮
this.nextbutton = $(o.nextbutton)||null; //上一个 按钮
this.index = o.index||1; //外面显示的 是 从1 开始    暂不能用
this.time = o.time || 3000; //轮播间隔时间
this.animationtime = o.animationtime || 2000; // 动画时间
this.autofalse = o.autofalse || false; //自动是播放的
this.itemdis = o.itemdis || 0; //上下item 切换距离间距
this.felem = $(this.f)||document;
this.elems = this.felem.find(this.selector)||document; //切换元素集合
//    this.isHover = o.isHover||true; //鼠标放在上面的时候悬停
this.totalpage = this.elems.length;
this.index = this.index-1;
this.lastindex = this.index -1;
this.dis = this.felem.width()+this.itemdis;
this.pauseclass = Math.random().toString().replace(/\./,"_")+"pause";
this.timeouthandle=null; //防止多个计时
this.hasclick = false; //防止点击过快，导致效果错乱

调用

gallery.css 原理见carousel单个轮播
不同之处在于
3个box放在一个galleryinner。将galleryinner 进行绝对定位
每一个box是向左浮动。

默认给一个box添加.on ，不然，会出现页面闪烁。
下面，即是给 第一个galleryinner,添加on

1
2
3
4
5
6
7
8
9
new CarouselWhole({
  "fselector":".gallery",
  "selector":".galleryinner",
  "lastbutton":".pagenav .last",
  "nextbutton":".pagenav .next",
  "autofalse":false,
  "animationtime":800,
  "itemdis":20
});

bug

页面闪烁

当页面没有执行js之前的css，与js初始修改的css不一致，就会发生闪烁。
所以，必须手动给一个box，添加.on
重置，所有box的初始left为 box的宽度，并且.on的left为0

1
2
3
4
5
6
.gallery .galleryinner{
  left: 640px;
}
.gallery .galleryinner.on{
  left:0;
}