360焦点图，求思路

Question

链接如下：
http://v.360.cn/360影视首页的焦点图，没有操作css，而是靠scrollLeft来实现，求实现思路，尤其是圆点按钮的mouseover事件函数。

Answer 1

不很明白你的意思  找个div div里放好多图片后  控制div的scrollLeft ？？

Answer 2

我看了下它的html，然后在控制台打印了一下图片容器的scrollLeft,应该就是你说的这样~~~~~

Answer 3

一个容器设置宽度和高度为单张图片的高和宽，overflow为hidden，控制scrollLeft的值进行移动，点附加了事件，记录是第几张图片，点击就设置容器的scrollLeft

Answer 4

个人感觉，scrollLeft比用absolute+left更不合适，因为left是css级别的，而scrollLeft不是。LZ既然知道是用的scrollLeft，不知道还有什么不明白的地方。
var slider = {
  init: Function //初始化入口
  wrapper: DOM //焦点图的容器
  curItem: Number //当前正在显示的序号
  itemWidth: Number //项的宽度
  totalItem: Number //一共有几项要滚动
  next: Function //下一个
  prev: Function //上一个
  goto: Function //跳转到第几个
  onAfterTransition  Event//每次滑动结束的事件
  onBeforeTransition Event//每次滑动开始之前的事件
}基本就这些属性和方法就足够了，可以考虑写成类，把方法挂到prototype上。
实现goto方法就行，利用当前序号和要跳转到的序号，计算要偏移的像素，scrollLeft也好，left值也好，都无所谓。prev和next都可以直接调用goto去完成。
至于动画，建议用jQ或者其他tween动画插件，愿意的话自己setTimeout去实现也未尝不可，不过自己手动setTimeout要出现变速动画就麻烦了。什么？圆点按钮的mouseover事件？
事件内部获取当前mouseover的圆点是第几个（用jQ的话直接index()就能返回当前元素在兄弟节点中数老几），然后调用goto(n)就行了。

Answer 5

关键就在于goto函数的思路~
比如说，当前正在显示的图片为第2张，当触发第6个圆形按钮的mouseover时候：
（1）一般的滚动会从第2张快速的依次经过第3、4、5张,最后一直滚到第6张停下来；
（2）而这个焦点图的滚动呢，是从第2张直接滚动到第6张，没有经过3、4、5；如果说从2直接到6是靠改变节点顺序实现的话，那打乱后的节点如何在下一次滚动时按正确的顺序进行显示？

Answer 6

和一般滚动在具体实现上还是有些出入的~~，动画应该是一样的，不过在滚动之前的设置应该有所不同~~~切换前进行了位置的调整，用firebug监控就知道了

Answer 7

和一般滚动在具体实现上还是有些出入的~~，动画应该是一样的，不过在滚动之前的设置应该有所不同~~~切换前进行了位置的调整，用firebug监控就知道了
不太容易调~~
刚刚找到源码http://www.jiaoben8.cn/Specia-id266.html，类库果然是自己写的。。    

Answer 8

关键就在于goto函数的思路~
比如说，当前正在显示的图片为第2张，当触发第6个圆形按钮的mouseover时候：
（1）一般的滚动会从第2张快速的依次经过第3、4、5张,最后一直滚到第6张停下来；
（2）而这个焦点图的滚动呢，是从第2张直接滚动到第6张，没有经过3、4、5；如果说从2直接到6是靠改变节点顺序实现的话，那打乱后的节点如何在下一次滚动时按正确的顺序进行显示？
是的，这是一个问题。经研究，它确实是打乱了顺序。所以，要解决这个问题，必须用一个映射表来记录实际的顺序和实际的DOM结构中的顺序。以下代码纯手敲的，基本逻辑肯定没问题，有bug的话耐心调试调试slider = {
  ...
  indexMap: [0,1,2,3,4,5,6,7,8,9], //初始化0-9
  goto: function(n) {
    if(n < 0 && n > this.totalItem) return;
     //触发beforeTransiton事件，传递n过去，如果返回false，则表示该动作被阻止了
    if(this.emit("beforeTransition",n) === false)  return;    if(n > curItem){
       //往右滑
       //以下两步将第n个插入到第curItem个的后面 
       var li = this.wrapper.find("ul").find("li");
       li.eq(this.indexMap[curItem]).after(li.eq(this.indexMap[n]));       //以下代码用于修正map数组，使之映射不出问题
       var target = this.indexMap[n];
       //从n到curItem，将map数组往后移
       for(var i=n-1, i>curItem; i--) {
          this.indexMap[i+1] = this.indexMap[i]; 
       }
       this.indexMap[curItem-1] = target;      //现在第n个（实际是第this.indexMap[n]个）移动到curItem后面了
      //加一个动画，就ok了
      this.wrapper.find("ul").animate({scrollLeft:"+="+this.itemWidth},800,$.proxy(function(){
          this.emit("afterTransition",this.curItem); //触发after事件
      },this));
      this.curItem = n;
    } else {
       ....
       ....
       //else的代码我就不写了
    }
  }
  ...
}