如题javascript图片切换怎么在表格显示??
各位高手能讲的具体点吗?

解决方案 »

  1.   

    LZ看看这个把宽度和高度调到你想要的高度<html>
    <head>
    <style type = "text/css">
    .a{
    width:500px;
    height:200px;
    border:1px solid;
    padding-left:10px;;
    padding-top:10px;
    }
    a{
    text-decoration:none;
    width:20px;
    height:10px;
    background-color:orange;
    text-align:center

    }
    </style>
    <script language = "javascript">
    var num1 = 1;
    var num2 = 5;
      var timer ;
    function Init(d){ if(Number(d)){//如果触动计时器
       clearTimeout(timer);
                num1 = d;//当前图片显示
    }
    for(var i =1;i<num2+1;i++){
    if(i == num1){
    document.getElementById(num1).style.display = "block";//下一张图片显示
    document.getElementById("1"+ num1).style.backgroundColor = "blue";
    }else{
    document.getElementById(i).style.display = "none";//当前图片隐藏
    document.getElementById("1"+i).style.backgroundColor = "";
    }
    }

    if(num1 == num2)
       num1 = 1;
    else
    num1++;

       timer = setTimeout("Init()",1000)
      } </script>
    </head>
    <body onload = "Init()">
    <div class = "a">
    <div>
    <img src = "topic/image/class1-1.jpg" id = "1">
    <img src = "topic/image/class1-2.jpg" style = "display:none" id = "2">
    <img src = "topic/image/class1-3.jpg" style = "display:none" id = "3">
    <img src = "topic/image/class1-4.jpg" style = "display:none" id = "4">
    <img src = "topic/image/class1-5.jpg" style = "display:none" id = "5">
        </div>

    <div>
    <a href = "#" id = "11" onClick = "Init(1)">1</a>
    <a href = "#" id = "12" onClick = "Init(2)">2</a>
    <a href = "#" id = "13" onClick = "Init(3)">3</a>
    <a href = "#" id = "14" onClick = "Init(4)">4</a>
    <a href = "#" id = "15" onClick = "Init(5)">5</a>
    </div>
    </div>
    </body>
    </html>