电商的广告切换—三种切换效果，动画的使用。

最新推荐文章于 2021-06-03 23:13:30 发布

原创

最新推荐文章于 2021-06-03 23:13:30 发布 · 1k 阅读

4 ·

CC 4.0 BY-SA版权

要点：

1.动画的封装，前面已经写了一个动画函数的封装，这是应用。这个例子中全部都是用一个封装的动画函数做成的，所以在第一张点击左边按钮时切换到最后一张，很突兀，同时如果切换的图片不是相邻的图片动画时间很长，这些都可以另外加动画解决。同时，从这个例子，对函数实际操作理解又深了一层。

2.定时器的使用，定时器的定义方式有两种，清理方式最好跟定义的方式相同。一般来说，定时器清除之后，还会定义同名定时器，这时定时器的名字一定要和原来的相同。

3.自定义属性，这里是index注意，定义的全局变量，因为在多个处理函数中都会有相同的index，注意本质index的内存空间的值是否发生改变，不要一直纠结什么全局变量局部变量。

4.最后一次说排他性，就是在将目标对象的类赋值为高亮类时，清除其他所有的定义的类名。

5.这个例子上面的ol原来css直接写空标签，但是将内部的<li>标签样式全部写好了，动态创建<li>标签的时候，要想看看css怎么定义的，根据他的名字完成，要统一。

6.节点的拷贝，.cloneNode 里面的参数是boolean类型，true为将属性也复制，false不保留属性

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
    * {
      padding: 0;
      margin: 0;
      list-style: none;
      border: 0;
    }

    .all {
      width: 730px;
      height: 454px;
      padding: 7px;
      border: 1px solid #ccc;
      margin: 100px auto;
      position: relative;
    }

    .inner {
      width: 730px;
      height: 454px;
      overflow: hidden;
      position: relative;
    }

    .inner li {
      width: 730px;
      height: 454px;
      float: left;
    }

    .inner ul {
      position: absolute;
      left: 0;
      top: 0px;
      width: 40000px;
    }

    .all ol {
      position: absolute;
      right: 10px;