JavaScript 实现图片轮播

今天给大家介绍下怎么用 JS 实现图片轮播效果。

原理描述：

使用JS实现轮播的原理是这样的：

 假设初始的情况，下图一个网格代表一个图，初始时，显示1 ：

 

代码实现：
1 JS 代码：

<script type="text/javascript">
    window.οnlοad=function(){
        //获得ul的元素
        var imgList=document.getElementById("imgList");
        //获得图片的数组
        var imgArr=document.getElementsByTagName("img");
        var navId=document.getElementById("navId");
        var outer=document.getElementById("outer");
        imgList.style.width=520*imgArr.length+"px";
        //设置navId的位置 使其居中
        navId.style.left=(outer.offsetWidth-navId.offsetWidth)/2+"px";
        //得到所有的a 标签 如果有其他的A的话  这里需要注意要使用navId子元素的a 
        var allA=document.getElementsByTagName("a");
        var index=0;
        allA[index].style.backgroundColor='black';//设置默认的a为黑色
        for(var i=0;i<allA.length;i++){
            allA[i].nu