简单轮播图案例

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

　　代码如下：

　　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样式

* {
            margin: 0;
            padding: 0;
        }
        img {
            width:500px;
        }
        #inner {
            width: 500px;
            height: 312.5px;
            position: relative;
            margin: 200px auto;
            /*background-color: pink;*/
            border: 1px solid pink;
            overflow: hidden;
        }
        ul {
            width: 2500px;
            position:absolute;/*必须有相对定位，相对于div,否则不会移动*/
        }
        li {
            margin: auto;
            list-style: none;
            float: left;
        }
         #squar {
            width: 119px;
            height: 20px;
            /*background-color: purple;*/
            /*z-index: 1;*/
            position:absolute;
            right: 10px;
            bottom: 10px;
        }
        span {
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: #fff;
            line-height: 20px;
            text-align: center;
            cursor: pointer;
        }
        .current {
            background-color: orangered;
        }

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