简单轮播图案例

　　使用封装动画函数的方式实现简单的轮播图

　　代码如下：

　　Html代码

<div class="box" id="box">
    <div id="inner">
        <ul>
            <li><a href="#"><img src="images/11.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/12.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/13.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/14.jpg" alt=""></a></li>
            <li><a href="#"><img src="images/15.jpg" alt=""></a></li>
        </ul>
        <div id="squar">
            <span class="current">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
        </div>
    </div>
</div>

　　Css样式

 1 * {
 2             margin: 0;
 3             padding: 0;
 4         }
 5         img {
 6             width:500px;
 7         }
 8         #inner {
 9             width: 500px;
10             height: 312.5px;
11             position: relative;
12             margin: 200px auto;
13             /*background-color: pink;*/
14             border: 1px solid pink;
15             overflow: hidden;
16         }
17         ul {
18             width: 2500px;
19             position:absolute;/*必须有相对定位，相对于div,否则不会移动*/
20         }
21         li {
22             margin: auto;
23             list-style: none;
24             float: left;
25         }
26          #squar {
27             width: 119px;
28             height: 20px;
29             /*background-color: purple;*/
30             /*z-index: 1;*/
31             position:absolute;
32             right: 10px;
33             bottom: 10px;
34         }
35         span {
36             display: inline-block;
37             width: 20px;
38             height: 20px;
39             background-color: #fff;
40             line-height: 20px;
41             text-align: center;
42             cursor: pointer;
43         }
44         .current {
45             background-color: orangered;
46         }

Javascript代码

 //获取最外层div
    var box=my$("box");
    //获取里面的子元素
    var inner=box.children[0];
    //获取inner的宽度
    var innerWidth=my$("inner").offsetWidth;
    //获取ul
    var ulObj=inner.children[0];
    //获取每个span标签
    var spanObj=inner.children[1].children;
    //为每个span注册鼠标划过事件
    for(var i=0;i<spanObj.length;i++){
        //循环时把索引保存在自定义属性中
        spanObj[i].setAttribute("index",i);
        spanObj[i].onmouseover=function (){
            //1.span背景颜色变化，即类样式的改变
            //先去掉样式
            for(var j=0;j<spanObj.length;j++){
                spanObj[j].removeAttribute("class");
            }
            //再给当前事件的这个设置样式
            this.className="current";

            //2.图片滑动——移动ul，每个图片的宽*出现在inner中的span的索引
            var index=this.getAttribute("index");
            // console.log(ulObj);
            animate(ulObj,-index*innerWidth);
            // console.log(index*innerWidth);



        };
    }

    //封装动画函数
    function animate(element,target){
        //首先进来先清理掉定时器，这样无论点多少次按钮都只会有一个定时器
        clearInterval(element.timeId);
        element.timeId=setInterval(function (){//var timeId替换成element.timeId,相当于给了一个属性，这样就不会点一下按钮给定一块空间
            //获取div当前的位置
            var left=element.offsetLeft;
            //设置每步走的距离
            var step=9;
            step=left>target?-step:step;
            //得到移动后的位置
            left+=step;
            //设置目标位置
            //判断是否到达目标位置
            if(Math.abs(left-target)>Math.abs(step)){//不用left<=target，这样无法往回走，所以用Math.abs(left-target)>Math.abs(step)
                element.style.left=left+"px";
            }else{
                clearInterval(element.timeId);
                element.style.left=target+"px";
            }
        },10);
    }

 总结：

　　1、实现移动功能时，要移动的这个对象必须脱离文本流。

　　2、使用var 变量，如果每执行一次事件就会分配一块内存，为了节省空间，可使用对象.属性的方式创建一个属性，这样无论执行多少次都只占一块内存空间。