无缝滚动（滑动焦点图）

April 12, 2018

5965 views

1823 words

描述：鼠标经过下面的数字方框标识的时候，显示对应的图片，并且是，通过动画来实现
注意：图片要换成自己的哦,注意调整自己图片的大小，或者定义自己的图片大小。
效果图：

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滑动焦点图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 490px;
            height: 170px;
            padding: 5px;
            border: 1px solid #ccc;
            margin: 100px auto;
        }
        .inner{
            width: 490px;
            height: 170px;
            position: relative;
            overflow: hidden;
        }
        ul{
            width: 500%;
            list-style: none;
            position: relative;
            left: 0;
        }
        li{
            float: left;
        }
        .square{
            position: absolute;
            bottom: 10px;
            right: 10px;
        }
        span{
            display:inline-block;
            width: 16px;
            height: 16px;
            background: #fff;
            text-align: center;
            margin: 3px;
            border: 1px solid #ccc;
            line-height: 16px;
            cursor: pointer;
        }
        .current{
            background: #ff551d;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="inner" id="inner">
            <ul>
                <li><img src="images/01.jpg" alt=""></li>
                <li><img src="images/02.jpg" alt=""></li>
                <li><img src="images/03.jpg" alt=""></li>
                <li><img src="images/04.jpg" alt=""></li>
                <li><img src="images/05.jpg" alt=""></li>
            </ul>
            <div class="square">
                <span class="current">1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    /**
     * 获取相关元素
     * @type {HTMLElement | null}
     */
    var inner = document.getElementById("inner");
    var imgWidth = inner.offsetWidth;
    var ul = inner.children[0];
    var spanArr = inner.children[1].children;
    /**
     * 循环为每个方框设置指定的时间等
     */
    for(var i = 0;i<spanArr.length;i++){
        //为每一个方块设置索引
        spanArr[i].index = i;
        //每一个方框设置鼠标经过事件
        spanArr[i].onmouseover = function () {
            //排他思想，为每一个方框设置鼠标经过时候的颜色
            for (var j = 0;j<spanArr.length;j++){
                spanArr[j].className = "";
            }
            this.className = "current";
            //调用动画函数
            animate(ul,-this.index*imgWidth);
        }
    }

    /**
     * 动画函数
     * @param ele 调用者
     * @param target 移动的位置
     */
    function animate (ele,target) {
        clearInterval(ele.timer);
        var speed = target>ele.offsetLeft?10:-10;
        ele.timer = setInterval(function () {
            var val = target-ele.offsetLeft;
            ele.style.left = ele.offsetLeft + speed + "px";
            if(Math.abs(val)<Math.abs(speed)){
                ele.style.left = target + "px";
                clearInterval(ele.timer);
            }
        },10)
    }
</script>

无缝滚动（滑动焦点图）