javascript实现图片切换、自动走、鼠标移入会停止，移出继续走

要实现以上效果并不难，把功能分开一步一步来实现就变得简单了，录制动态图不流畅，看代码意会吧！

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        * {margin:0; padding: 0}

        button {

            width: 50px;

        }

        p {

            text-align: center;

        }

        .active {

            background-color: yellow;

        }

        #wrap {

            width:210px;

            overflow: hidden;

            margin:0 auto;

        }

        #inner {

            width:9999px;

            overflow: hidden;

            position: relative;

            left:0;

            transition: left 0.6s;

        }

        #inner a {

            float: left;

        }

        #inner img {

            display: block;

            width:210px;

        }

    </style>

</head>

<body>

    <div id="wrap">

        <div id="inner">

            <a href="###"><img src="img/1.jpg"></a>

            <a href="###"><img src="img/2.jpg"></a>

            <a href="###"><img src="img/3.jpg"></a>

            <a href="###"><img src="img/4.jpg"></a>

            <a href="###"><img src="img/5.jpg"></a>

            <a href="###"><img src="img/6.jpg"></a>

            <a href="###"><img src="img/7.jpg"></a>

            <a href="###"><img src="img/8.jpg"></a>

            <a href="###"><img src="img/9.jpg"></a>

            <a href="###"><img src="img/10.jpg"></a>

            <a href="###"><img src="img/11.jpg"></a>

            <a href="###"><img src="img/12.jpg"></a>

            <a href="###"><img src="img/13.jpg"></a>

            <a href="###"><img src="img/14.jpg"></a>

        </div>

    </div>

    <p>

        <button class="active">1</button>

        <button>2</button>

        <button>3</button>

        <button>4</button>

        <button>5</button>

        <button>6</button>

        <button>7</button>

        <button>8</button>

        <button>9</button>

        <button>10</button>

        <button>11</button>

        <button>12</button>

        <button>13</button>

        <button>14</button>

    </p>

    <script type="text/javascript">

    //1.找节点

    var buttonList = document.getElementsByTagName("button");

    var inner = document.getElementById("inner");

    var perWidth = inner.children[0].offsetWidth;

    function tab() {

        inner.style.left = - perWidth * index + "px";

        for(var j = 0; j < buttonList.length; j++) {

            buttonList[j].className = "";

        }

        buttonList[index].className = "active";

    }

    for(var i = 0; i < buttonList.length; i++) {

        buttonList[i].index = i;

        buttonList[i].onclick = function() {

            index = this.index;

            tab();

        }

    }

    var index = 0;

    function next() {

        index ++;

        if(index > buttonList.length - 1) {

            index = 0;

        }

        tab();

    }

    var timer = setInterval(next,1000);

    inner.onmouseover = function() {

        // alert("鼠标移入");

        clearInterval(timer);

    }

    inner.onmouseout = function() {

        timer = setInterval(next,1000);

    }

    </script>

</body>

</html>

以后还会继续添加些效果补充完整的....

巴特西

javascript实现图片切换、自动走、鼠标移入会停止，移出继续走

最新文章

热门文章