根据图片多少设置宽度的图片轮播

        *{
            margin: 0;
            padding: 0;
        }
        #outer{
            width: 400px;
            height: 400px;
            margin: auto;
            background-color: #bfa;
            padding: 10px 0;
            position: relative;
            overflow: hidden;
        }
        #imgList{
            list-style: none;
            width: 2500px;
            position: absolute;
        }
        #imgList li{
            float: left;
        }
        #nav{
            position: absolute;
            bottom: 10px;
            
        }
        #nav a{
            width: 20px;
            height: 20px;
            margin: 0 10px;
            float: left;
            background-color:red;
            opacity: 0.5;

        }
        #nav a:hover{
            background-color: cadetblue;
        }

js部分

           window.onload  = function(){
            //获取imglist的宽度
            var imgList = document.getElementById("imgList");
            //获取图片数量
            var arr = document.getElementsByTagName("img");
            //设置宽度为多少
            imgList.style.width = 400 * arr.length +"px";
            var nav = document.getElementById("nav");
            var outer =document.getElementById("outer");
            //设置nav的left值，让导航点居中
            nav.style.left = (outer.offsetWidth-nav.offsetWidth)/2 +"px";
            //默认第一章索引
            var index = 0;
            //获取所有的a
            var allA = document.getElementsByTagName("a");
            //第一个默认颜色设置
            allA[index].style.backgroundColor = "cadetblue";
            //为所有的超链接绑定响应函数
            for(var i = 0;i<allA.length;i++){
                //为每一个超链接添加一个num属性
                allA[i].num = i;
                allA[i].onclick = function(){
                    //获取点击超链接的索引
                    index = this.num;
                    //切换图片
                    imgList.style.left = -400*index +"px";
                    //修改正在被选中的a
                    setA();
                }
            };
            //方法设置选中的a 
            function setA(){
                //遍历所有的a并将背景色设置为红色
                for(var i = 0; i<allA.length ; i++){
                    allA[i].style.backgroundColor = "";
                };
                allA[index].style.backgroundColor = "cadetblue";
            }
        }

html部分

    <!-- 外部div作为容器 -->
    <div id="outer">
        <!-- 创建ul放置图片 -->
        <ul id="imgList">
            <li>
                <img src="../image/步骤1.jpg">
            </li>
            <li>
                <img src="../image/步骤2.jpg">
            </li>
            <li>
                <img src="../image/步骤3.jpg">
            </li>
            <li>
                <img src="../image/步骤4.jpg">
            </li>
            <li>
                <img src="../image/步骤5.jpg">
            </li>
        </ul>
        <div id="nav">
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </div>