js_animation水平轮播

我们先来看看效果，这里来看淘宝的首页轮播样式：

我们可以看出轮播的效果是从左到右滑动的

其实移动的原理是这样：

从0前面加追加了个3，从3 后面追加了个0

当我们点到最后一张时，再点击下一张就追加了最开始的坐标为0的图

但是如果我们每次都追加一张图，length就会无限长，这时候怎么办呢？

当我们切换到最后一张下标为0，以没有动画的形式切再换到第一张0下标图片，依次循环

向前轮播追加下标为3的图也是同样的道理

需要用到的新知识点：

z-index    设置到最顶上显示

cursor:pointer    设置速鼠标移入时有手指形状

!important    设置优先级

( function( ){ } )( )    立即执行函数，为了避免污染全局作用域

类名:first-of-type  选择第一个元素

类名:last-of-type  选择最后一个元素

cloneNode(true)    复制元素节点，true是将子元素一同复制

appendChild(新)    向节点添加最后一个子节点

insertBefor( 新,已有 )    在指定的已有节点之前添加子节点

我们来具体的看一下：

先来将图片按照上面排列好：

运行结果如下：

这样就和上面分析的水平轮播版式一样了

这样就可以开始slideTo的动作了：

这里只看script的代码，其他的都没有改变

运行结果如下：

这里有个问题，虽然可以点击轮播，但是第一张显示的不对，第一张应该是千里马图片

我们应该把ul的位置在init中进行设定：

只在init函数中修改一下即可：

运行结果如下：

我们再加上overflow:hidden;就可以看出轮播的效果了：

这里只改了style中的.slider：

运行结果如下：

接着实现点击小块的轮播：

只需要改init函数中的内容：

运行效果如下：

设置完点击小块后，该设置焦点了：

焦点这件事，交给selidTo()函数去做，只看sliderTo()中修改的：

运行效果如下：

接下来就是设置自动轮播了：

设置两个地方：

1.auto()函数和stop()函数

2.init()函数

auto和stop中：

init()中：

运行结果如下：

好了，本节所有的效果完成，最后我们来看一遍最终的代码：