js学习（新浪微博实习） 2 滚动照片栏的实习

      第二个礼拜。

      开始尝试按照模板实现一些微公益首页的js效果。花了两天时间还原了一个滚动的照片栏。

      记下其中的心得。

      css中 1 position为static的时候，会忽视掉left等定位属性

                2  absolute可以覆盖其他元素，按文档流的先后顺序决定谁在上面，当然可以修改某些属性实现手动控制。

   html 由于新浪的分工比较清晰，js和builder分开，所以写js的时候尽量用自定义标签属性去查找标签，不要用id，避免和页面由于id的改变或者css的改变，导致js出意外效果，比如，新浪中习惯使用 node-type action-type

以及action-data

     

      setTimeout嵌套重复定时器，清除的时候，清除里面的就可以了如

       Id1=setTimeout(function(){id2=setTimout(doSomeThing,200)},200);

            clearTimeout(id1)不管用，id2可以。

     关于滚动照片栏的实现：

     1 将n张照片横向排列在一个div中，div的宽度固定，overflow设为hidden。

     2 照片作为li设置在ul中，清除默认li效果，排成一排，ul的宽度设为无限大，这样就可以横向排出n张照片。      3 向左滚动的实现，照片向左滚动，显然照片排列集体向右移动一张照片宽度就行了。先把照片组最后一张移到最前面，然后把他们整体左移一格，这样最后一张照片在显示区域的左边了，再释放动画效果，让他移到显示区域。

     4 向右滚动的实现，几乎和向左滚动时候原理一样，不过可以先动画效果把整体向左移一格，这样可视区域就显示第二种，然后把当前第一张放到末尾处。

     5 自动播放的实现就是一直向右滚动，设置时间定时器就可以了。

     6 下脚标跳转到指定页，就是从点击的数字页开始，把它之后的每一页一直插到ul的最后一项，直到点击页处于显示区域。