carousel单个轮播

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

实现单个轮播，鼠标悬停。
兼容到ie7

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 = 1; //外面显示的 是 从1 开始    暂不能赋值
    this.time = o.time || 2000; //轮播间隔时间
    this.animationtime = o.animationtime || 1500; // 动画时间
    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.elems.width()+this.itemdis;
    this.pauseclass = Math.random().toString().replace(/\./,"_")+"pause";
    this.timeouthandle=null; //防止多个计时
    this.hasclick = false; //防止点击过快，导致效果错乱

实现原理

css结构

gallery.css 是轮播框架的css
每个显示元素相当于一个box。
实现原理，利用绝对定位，切换box的位置。
根据需要修改轮播块的大小。
其中.galleryinner 部分，是box的切换区域。如果要显示n张图片，则
.galleryinner宽度 = nboxwidth+ (n-1)boxmargin

循环的原理

单个展示box形成了循环队列。
例如 0,1,2,3
当前length 是4。
当next时，从右往左补进数据。如果当前已经是最后一个box即是最后一个length-1，则呼唤0；
当last时，从左往右补进数据。如果当前以及是0，则呼唤 length-1,就是3;

调用

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

1
2
3
4
5
6
7
new CarouselSingle({
  "fselector":".gallery .galleryinner",
  "selector":".imgbox2",
  "lastbutton":".gallery .last",
  "nextbutton":".gallery .next",
  "itemdis":20
});

bug

页面闪烁

发生原因和整体轮播一样，当页面没有执行js之前的css，与js初始修改的css不一致，就会发生闪烁。
需要解决2个问题。
-修改显示box的left，让他出现
-未显示的box的left，需要超出显示区域的宽度，让它影藏。left为.galleryinner的宽度

如何修改显示的box的left呢？
如上文css结构，box宽度为boxwidth，距离为boxmargin
在界面内，一共显示了3个box。如果不发生闪烁，页面初始的css，必须要求如下

第1个box的left: 0
第2个box的left: (boxwidth+boxmargin) 乘以 1
第3个box的left: (boxwidth+boxmargin) 乘以 2

显示了多少box，要求修改多少box的left。
在没有css预处理器的情况下，只能手动改了。如果程序源代码，使用了预处理器，那就更好了。