丸熊酱

实现这个的思路是：

1.图片列表以字符串形式拼接，最终渲染到DOM中。

2.封装等比例缩放函数，实现图片列表的等比例缩放和居中效果。

3.采用zeptop插件处理移动事件，大图同样等比例压缩居中，实现图片滑动效果。

• 图片列表渲染

  function animate(offset){ flag = true; var newleft = parseInt(list.style.left) + offset; var time = 1000; var interval = 10; //每次位移大小 var speed = offset/(time/interval); function go(){ //目标偏移量和当前位置之差 与 每次位移大小比较，若足够时正常偏移 if(Math.abs(parseInt(list.style.left) - newleft) >= Math.abs(speed)){ //缓慢偏移 list.style.left = parseInt(list.style.left) + speed + "px"; setTimeout(go,interval); } else { //位移不足时直接到达目标位移处 flag = false; list.style.left = newleft +"px"; //边界值处理 if(newleft > 0){ list.style.left = -2400 + "px"; } if(newleft < -2400){ list.style.left = 0 + "px"; } } } go(); }

• 圆点函数

  记录点击圆点的序号及当前点亮圆点的序号，之间的差值即为需要偏移的参考数。

  for (var i = 0; i< buttons.length; i++){ buttons[i].onclick = function(){ var myIndex = parseInt(this.getAttribute("index"));// var offset = -600*(myIndex - index); animate(offset); index = myIndex; showbutton(); } }