JavaScript-Dom入门-轮播图原理和实例练习

想要制作一个轮播图我们要先弄清楚他的原理，如何能让图片自右向左滑动？
让我们想一想生活中有没有类似的东西，比如电影胶片。
我们可以创建一个块作为投影区，创建一个列表作为底片并使其向左移动，达到轮播图效果。

创建一个块和列表

创建一个块作为总的容器和显示区域。

<div id="out">
    <ul id="imgList">
        <li><img src="pto/many.jpg" ></li>
        <li><img src="pto/hello.jpg" ></li>
        <li><img src="pto/timg.jpg" ></li>
        <li><img src="pto/zhenjing.jpg"></li>
    </ul>
</div>

现在图片竖着堆在一列，块也不知道在哪里，那添加一点样式

开启定位并令其居中，并且让块大一点并添加背景好确定位置（本实验图片统一宽高比500*431，所以div宽高比520*451）
去掉列表默认样式让列表横着显示

        *{
   
            margin: 0;
            padding: 0;
        }
        #out{
   
            width:520px;
            height:451px ;
            background-color: #00bcd4;
			position: relative;
			margin: 50px auto;
			/*overflow: hidden;*/
			/*剪掉我们不需要的部分，为了方便调试注掉了*/
        }

        #imgList{
   
            list-style: none;
            position: absolute;
            /* left: -520px; */
        }
        #imgList li{
   
            float:left;
            margin: 10px;
        }

在尝试浮动后图片依旧是一列，是因为lu的宽度太小放不下，所以我们要扩大，但是我们不能直接决定他的宽度因为随着图片的增加，宽度应不断变大，于是我们用JavaScript来解决宽度
每增加一张图片扩大520px宽度

window.onload=function () {
   
        // 动态的ul长度
        var imgList = document.getElementById("imgList");
        var imgArr = document.getElementsByTagName("img");
        imgList.style.width=520*imgArr.length+"px";
    }//onload

现在，装载图片的胶片ul每向左偏移-520px就会更换一个图片

导航栏

轮播图会定时更换，但是有可能你的客户刚刚被吸引就已经更换图片了，如果你想让你的客户干巴巴的瞪着图片回来，你很可能失去她。
所以一个完整的轮播图还需要一个能手动切换前后的按钮或一个导航条。
我们这里用几个超链接完成任务

    <div id="navDiv">
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
    </div>

ul在开启绝对定位后脱离文档流，现在我们的导航因为没有内容缩成一团挤在左上角
我们要让每一个超联接彼此分开，手动撑开空间，调整到靠下的位置，下方正中或靠右是比较好的选择.
调整透明度降低导航对于人的吸引力，毕竟图片才是主题。
而位置的调整为了便于扩充我们还是要用js来解决。

  }
		 #navDiv{
   
            position: absolute;
            bottom: 15px;
        }
        <