11.1.wangyi 小结

一:css 样式注意点:left_span 和right_span与图片下面的span 公用一个parent
二:js部分:

1. 遍历图片的张数 ,在这里动态创建footer_span inserBefore插入到第二个span中.同时给它们绑定类名,拿出oSpan.innerHTML 为下面的span的索引做准备的提供;
   2:设置出了第一张图片以外,其他的图片从新遍历 统一放在右边, left=parent.offsetWidth;
   3:遍历所有的 footer_box.children.(遍历所有的span包括 left_span,right_span)
   3.1 :通过类名 可以先判断点击的是right_span 与 left_span
   3.1.1:点击left_span 图片向右走 count-- .这里就是有三步 1:让当前的图片立即向右走 一个parent.offsetWidth; 2.让上一个来到左边-parent.offsetWidth;位置,等待动画触发.3:让当前对应的索引的图片 动画显示 left:0;
   4 :else :如果点击的都不是上面的两个 ,那么就是点击了这里 : 这里就拿上面原来创建span的索引 来 跟 (当前显示的索引)isNow 索引做对比 来判断是点击了相对于当前索引的左边还是右边;
   5:footer_span的排他思想就单独另外用一个函数,这样方便我们调用(因为它有三个地方的调用) 具体哪个调用的看代码吧, 在这里主要让你们注意的就是怎么用排他的遍历
   在这里我们遍历就 先排除 left_span 与 right_span 列子: for (var i =1; i < footer_box.children.length - 1; i++) ;然后让当前点击的绑定类名 .但是这里就注意 了 isNow + 1; 因为我们遍历的时候是从1 开始遍历故加1,footer_box.children[isNow+1].
   className = 'current cur'; 然后设置全部的为另外一个类 footer_box.children[i].className = 'current ';
   6:设置无限向左滚动 ,用到定时器
   7:onmouseover 的时候清除定时器 这样就停止动画 clearInterval(timer);
   8:onmouseout 的时候 开启定时器 timer=setInterval(autoPlay,1000);

代码如下: