webAPI 通过图片页面小按钮来实现图片的切换

实现通过鼠标放到右下角的小按钮来实现图片的切换

静态页面

    

        

            

            

            

            

            

            

        
        

            1
            2
            3
            4
            5
            6
        
    

样式部分

js部分
定义一个函数，用于获取id

function my$(id){
    return document.getElementById(id);
}

先封装我们所需要的动画的函数

  //定义动画函数  目标位置需要改变，元素要变
  //element  要操作的元素
  //target  目标位置
    function animate(element,target) {
        //在调用之前，先清理定时器
        clearInterval(element.tim);
        //设置定时器
        element.tim=setInterval(function () {
            //获取当前位置
            var current=element.offsetLeft;
            //2.设置div每次移动多少像素
            var step=10;
            //判断向左移还是右移
            step= currentMath.abs(step)){
                //设置div的left值
                element.style.left=current+"px";
            }
            else
            {
                clearInterval(element.tim);
                //将目标位置设置为div的left值
                element.style.left=target+"px";
            }
        },6)//这里设置的是定时器每6毫秒执行一次，
    }

封装的动画函数写好了，我们再来写实现通过鼠标放到右下角的小按钮来实现图片的切换

  //获取最外面的div
    var box=my$("box");
    //获取相框
    var inner=box.children[0];//获取的是id=box下面的第一个子元素
    //获取相框的宽度
    var imgWidth=inner.offsetWidth;
    //获取ul
    var ulObj=inner.children[0];
    //获取小方块 所有的span
    var spanObj=inner.children[1].children;
    //排插  循环所有的span的标签  注册鼠标移入事件
    for (var i=0;i