制作多幅图片的切换,急需!!!!!!!!!!!!!!!!

怎样用javascript制作一个多幅图片切换特效,要求使用window对象的setTimeout()方法,代码简单一点

解决方案 »

  1.   


    <html>
    <head>
    <script type="text/javascript">
    var c=0
    var t
    function timedCount()
    {
    if(c%2 == 0)
    document.getElementById('pic').src="http://www.dosgd.com/images/pro_t/otop_logo.jpg";
    else
    document.getElementById('pic').src="http://www.aspxcs.net/UploadFiles/2010/6/201006020025306513.png";c=c+1
    t=setTimeout("timedCount()",1000)
    }
    </script>
    </head><body onload="timedCount()">
    <div>
    <img id="pic"  src="http://www.aspxcs.net/UploadFiles/2010/6/201006020025306513.png">
    </img>
    </div>
    </body></html>
      

  2.   

    c 定时 1秒+1 
    三个图切换：c%3=0换src1, c%3=1换src2, c%3=2换src3
      

  3.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>广告切换！</title>
    <style>
    #dNum{
    width:120px;
    height:30px;
    left:240px;
    top:165px;
    position:absolute;
    }
    td{
    width:30px;
    height:30px;
    text-align:center;
    vertical-align:middle;
    font-size:18px;
    font-family:"Times New Roman", Times, serif;
    cursor:pointer;
    }
    .selectedNum{
    background-color:#F00;
    color:#FF0;
    }
    .normalNum{
    background-color:#CCC;
    color:#0F0;
    }
    </style>
    <script>
    window.onload=function(){
    startCircle();
    }function initImg(){
    for(var i=1;i<=4;i++){
    document.getElementById("img"+i).style.display="none";
    document.getElementById("td"+i).className="normalNum";
    }
    }var index=1;
    var timer;
    function startCircle(){
    initImg();
    document.getElementById("img"+index).style.display="block";
    document.getElementById("td"+index).className="selectedNum";
    index++;
    if(index>4)
    index=1;
    timer=setTimeout("startCircle()",2000);
    }
    function selectImg(ind){
    clearTimeout(timer);
    index=ind;
    startCircle();

    }
    </script>
    </head><body>
    <img src="..." id="img1"/>
    <img src="..." id="img2"/>
    <img src="..." id="img3"/>
    <img src="..." id="img4"/>
    <div id="dNum">
    <table width="120" cellpadding="0">
    <tr>
    <td id="td1" class="normalNum" onclick="selectImg(1)">1</td>
    <td id="td2" class="normalNum" onclick="selectImg(2)">2</td>
    <td id="td3" class="normalNum" onclick="selectImg(3)">3</td>
    <td id="td4" class="normalNum" onclick="selectImg(4)">4</td></tr>
    </table>
    </div>
    </body>
    </html>