js轮廓图界面-CFANZ编程社区

显现简单轮廓图自动切换图片，和点击切换图片
详细代码如下：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #outer {
            width: 288px;
            height: 193px;
            /* 居中 */
            margin: 50px auto;
            /* 设置背景颜色 */
            background-color: yellowgreen;
            padding: 10px 0;
            /* 给父元素开启相对定位 */
            position: relative;
            /* 裁剪溢出的内容 */
            overflow: hidden;


        }

        #imglist {
            /* 去除列表符号 */
            list-style: none;
            /* 设置ul宽度 */
            width: 1500px;
            /* 开启绝对定位 */
            position: absolute;
            left: 0;
        }

        /* 设置图片的li */
        #imglist li {
            float: left;
            /* 设置左右外边距 */
            padding: 0 10px;
        }

        /* 设置导航按钮 */
        #navDiv {
            /* 开启绝对定位 */
            position: absolute;
            /* 设置位置 */
            bottom: 15px;
            /* 设置left的值
               outer：288
               navDiv:25*5=125
                  288-125=163/2=81.5
             */
            /* left: 81.5px; */
        }

        #navDiv a {
            width: 15px;
            height: 15px;
            background-color: red;
            float: left;
            /* 左右外边距 */
            margin: 0 5px;
            /* 设置透明 */
            opacity: 0.5;
            /* 兼容ie8透明 */
            filter: alpha(opacity=50);
        }

        /* 设置鼠标移入导航的样式 */
        #navDiv a:hover {
            background-color: black;
        }
    </style>
    <!-- 调用外部tools.js代码 -->
    <script type="text/javascript" src="tools.js"></script>
    <script>
        window.onload = function () {
            //设置imglist的宽度
            //获取imglist
            var imglist = document.getElementById("imglist");
            //获取页面所有的img标签
            var imgArr = document.getElementsByTagName("img");

            //设置imglist的宽度
            imglist.style.width = 500 * imgArr.length + "px";

            //设置导航按钮居中
            var navDiv = document.getElementById("navDiv");
            var outer = document.getElementById("outer");
            //设置导航栏navDiv的值
            navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + "px";

            //默认显示图片索引
            var index = 0;
            //获取所有a
            var allA = document.getElementsByTagName("a");
            //设置第一张默认选中的效果
            allA[index].style.backgroundColor = "black";

            /*
              点击超链接切换到指定的图片
                点击第二个超链接显示第二个图片
            */
            //为所有超链家绑定单击响应函数
            for (var i = 0; i < allA.length; i++) {
                //为每个超链接添加一个num属性
                allA[i].num = i;
                allA[i].onclick = function () {
                    //当点击下边导航栏的时候关闭自动切换定时器
                    clearInterval(time);

                    //获取点击超链接的索引
                    index = this.num;
                    //切换图片
                    /*
                     第一张 索引0 left=0
                     第二张 索引1 left=-288
                     第三章 2 -576
                    */
                    //设置选中的a
                    //imglist.style.left = -288 * index + "px";
                    //使用动画move来切换图片
                    move(imglist, 20, -288 * index, "left", function () {
                        autoChange();
                    });

                    //修改正在选中导航栏的a
                    //allA[index].style.backgroundColor = "black";
                    setA();

                };
            }
            //自动切换图片
            autoChange();

            //创建一个方法来设置选中的a
            function setA() {
                //判断当前图片是否是最后一张图片
                if (index >= imgArr.length - 1) {
                    //则将index设置为0
                    index = 0;
                    //通过css将最后一张切换成第一张
                    imglist.style.left = 0;
                }

                //遍历所有的a，并将他们的背景设置为红色
                for (var i = 0; i < allA.length; i++) {
                    allA[i].style.backgroundColor = "";
                }
                //将选中的a设置为黑色
                allA[index].style.backgroundColor = "black";
            }

            //定义一个自动切换定时器的标识
            var time;
            //创建一个函数，来开启自动切换图片
            function autoChange() {
                //开启一个定时器，用来定时切换图片
                time = setInterval(function () {
                    //是索引自增
                    index++;
                    //index不能逐渐增加，需要判断index的值
                    index %= imgArr.length;
                    //执行动画，切换图片
                    move(imglist, 20, -288 * index, "left", function () {
                        //修改导航按钮，变成黑色
                        setA();
                    });
                }, 3000);
            }
        };
    </script>
</head>

<body>
    <div id="outer">
        <ul id="imglist">
            <li>
                <img src="images/a.jpg" alt="">
            </li>
            <li>
                <img src="images/b.jpg" alt="">
            </li>
            <li>
                <img src="images/c.jpg" alt="">
            </li>
            <li>
                <img src="images/d.jpg" alt="">
            </li>
            <li>
                <img src="images/e.jpg" alt="">
            </li>
            <li>
                <img src="images/a.jpg" alt="">
            </li>

        </ul>
        <!-- 创建导航按钮 -->
        <div id="navDiv">
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </div>
</body>

</html>
结果：