javascript 怎样实现图片动态切换

思路：使用javascript定时器函数setTimeout()每隔一定的毫秒间隔数执行动作，在执行的动作中循环替换图片的src属性。树立演示如下：

1、HTML结构

2、javascript代码

function change(n){
if(n>5) n=1;  // 一共5张图片，所以循环替换
document.getElementById("test").setAttribute("src", n+".png");
n++;
setTimeout("change("+n+")",1000);
}
window.onload = function(){
setTimeout("change(1)", 1000);
}

3、效果演示

1. 不给认证就算了，答案我也懒得改了，以后再也不做这种费力的事情，比去面试还较劲

2. css代码如下：

* {  
    margin: 0px;padding: 0px;  
}  
  
body {  
    width: 632px;  
    /*background-color: blue;*/  
    margin: 0 auto;  
}  
  
#imgsCom {  
    background-color: yellow;  
    /*相对定位，为了下层可以使用绝对定位时以本div的原点为原点*/  
    position: relative;  
}  
  
#ulnav{  
    list-style-type: none;  
     
    position: absolute;  
    /*使用以imgsCom为原点来绝对定位到右下角*/  
    bottom: 0px;  
    right: 0px;  
}  
#ulnav li{  
    list-style-type: none;  
    float: left;  
    background-color: black;  
    color: white;  
    margin-right: 5px;  
    width: 20px;  
    height: 20px;  
    line-height: 20px;  
    text-align: center;  
    cursor: pointer;  
}

2.html代码如下：

  

  
      
      
      
      
  
        function gel(id) {  
            return document.getElementById(id);  
        }  
  
        function  clearLiBg() {  
            var mylis = gel("ulnav").childNodes;  
            for (var i = 0; i < mylis.length; i++) {  
                if (mylis[i].nodeType == 1) {  
                    mylis[i].style.backgroundColor = "black";  
                }  
            }  
        }  
        
        window.onload = function() {  
            //给三个li都指定一个属性  
            var lis = gel("ulnav").childNodes;  
            for (var i = 0; i < lis.length; i++) {  
                if (lis[i].nodeType == 1) {  
                    lis[i].onclick = function () {  
                        //更换图片  
                        gel("myimg").setAttribute("src", "images/" + this.innerHTML + ".png");  
                        //所有LI颜色复原  
                        clearLiBg();  
                        //更换LI背景标签颜色  
                        this.style.backgroundColor = "silver";  
                    };  
                }  
            }  
        };  
      
  
  
      
          
          
            
1
  
            
2
  
            
3