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

实现通过鼠标放到右下角的小按钮来实现图片的切换
在这里插入图片描述
静态页面

<body>
<div class="box" id="box">
    <div class="inner"><!--相框-->
        <ul>
            <li><a href="#"><img src="images/1.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/2.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/3.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/4.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/5.jpg" alt=""/></a></li>
            <li><a href="#"><img src="images/6.jpg" alt=""/></a></li>
        </ul>
        <div class="square">
            <span class="current">1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
        </div>
    </div>
</div>
</body>

样式部分

 <style>
        * {
            margin: 0;
            padding: 0
        }

        ul {
            list-style: none
        }

        img {
            vertical-align: top
        }

        .box {
            width: 730px;
            height: 454px;
            margin: 100px auto;
            padding: 5px;
            border: 1px solid #ccc;
        }

        .inner {
            width: 730px;
            height: 454px;
            background-color: pink;
            overflow: hidden;
            position: relative;
        }

        .inner ul {
            width: 1000%;
            position: absolute;
            top: 0;
            left: 0;
        }

        .inner li {
            float: left;
        }
        .square {
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
        .square span {
            display: inline-block;
            width: 16px;
            height: 16px;
            background-color: #fff;
            text-align: center;
            line-height: 16px;
            cursor: pointer;
        }

        .square span.current {
            background-color: orangered;
            color: #fff;
        }

    </style>

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= current<target?step:-step;
            //3.每次移动后的距离
            current+=step;
            // console.log(current);
            //4.判断当前移动后的位置是否达到目标位置
            if(Math.abs(target-current)>Math.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<spanObj.length;i++){
        //把索引值保存到每一个span中
        spanObj[i].setAttribute("index",i)
        spanObj[i].onmouseover=function () {
            //先去掉所有的span的标签的背景颜色
            for (var j=0;j<spanObj.length;j++){
                spanObj[j].removeAttribute("class");
            }
            //给当前的span的背景颜色
            this.className="current";
            var index=this.getAttribute("index");
            animate(ulObj,-index*imgWidth);
        }
    }

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

猜你喜欢