通过按钮实现图片的播放 大神 HELP!!!!

http://www.17sucai.com/pins/demoshow/308
http://download.csdn.net/detail/slwsss/8137721

解决方案 »

  1.   


    <!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 type="text/css">
     body{ margin:0px; padding:0px;}
     #tu{ width:500px; height:400px; margin:0px auto;position:relative;}
     #pic1{ position:absolute; width:500px; height:400px;}
     #pic2{ position:absolute; width:500px; height:400px; display:none;}
     #pic3{ position:absolute; width:500px; height:400px;display:none;}
     #pic4{ position:absolute; width:500px; height:400px;display:none;}
     #zuo{ border-radius:10px; width:50px; height:50px; position:absolute; left:380px;top:180px;}
     #you{border-radius:10px; width:50px; height:50px; position:absolute; left:935px;top:180px;} </style>
     </head> <body>
     <div id="tu">
         <a><img id="pic1" src="pic1.jpg" /></a>
         <a><img id="pic2" src="pic2.jpg" /></a>
         <a><img id="pic3" src="pic3.jpg" /></a>
         <a><img id="pic4" src="pic4.jpg" /></a>
     </div>
     <button id="zuo" onclick="move(1)"> < </button>
     <button id="you" onclick="move(2)"> > </button>
     <script type="text/javascript">
    var ntk=0, ntl=4;
    function move(data){
    if(data == 2)
    ntk++;
    else
    ntk--;
    if(ntk<0)
    ntk = ntl-1;
    if(ntk>=ntl)
    ntk = 0;
    for(var i=0; i<ntl; i++)
    document.getElementsByTagName("img")[i].style.display = i==ntk?"block":"none";} </script>
     </body>
     </html> 
      

  2.   

    <!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 type="text/css">
    body{ margin:0px; padding:0px;}
    #tu{ width:500px; height:400px; margin:0px auto;position:relative;}
    #tu img{width:500px; height:400px;}
    #tu a{display:none;position:absolute; width:500px; height:400px;}
      #tu a.show{display:block;}
    #zuo{ border-radius:10px; width:50px; height:50px; position:absolute; left:380px;top:180px;}
    #you{border-radius:10px; width:50px; height:50px; position:absolute; left:935px;top:180px;}</style>
    </head><body>
    <div id="tu">
    <a class="show"><img src="http://avatar.csdn.net/B/A/B/1_liuhong67.jpg" /></a>
        <a><img src="http://bbs.csdn.net/assets/nolines_minus-18fe59b65521ce9d0f01474ed4ff7c0d.gif" /></a>
        <a><img src="http://bbs.csdn.net/assets/ico_rss-fefe2defe6c78c30b7a79d524617cbf4.gif" /></a>
        <a><img src="http://cpro.baidustatic.com/cpro/ui/noexpire/img/2.0.1/bg.png" /></a>
    </div>
    <button id="zuo" onclick="hou()"> < </button>
    <button id="you" onclick="qian()"> > </button>
    <script type="text/javascript">
      var d=document.getElementById('tu').getElementsByTagName('a');
      var i=0;
    function qian(){
      d[i].style.display='none';
      i=(d.length-1+i)%d.length
      d[i].style.display='block';
    }
    function hou(){
      d[i].style.display='none';
      i=(i+1)%d.length;
      d[i].style.display='block';
    }
    </script>
    </body>
    </html>
      

  3.   

    怎么给分啊,两位大神都做出来了,后面大神的容易理解,全面大神的那个i==ntk?"block"  中的 ?代表什么意思?
      

  4.   


    条件（三目）运算符 (?:)
    根据条件执行两个语句中的其中一个。test ? 语句1 : 语句2参数
    test任何 Boolean 表达式。语句1当 test 是 true 时执行的语句。可以是复合语句。语句2当 test 是 false 时执行的语句。可以是复合语句。说明
    ?: 运算符是 if...else 语句的快捷方式。它通常被用作较大表达式的一部分，而在此处使用 if...else 语句是不协调的。例如： var now = new Date();
    var greeting = "Good" + ((now.getHours() > 17) ? " evening." : " day.");
    在该例子中，如果是 6pm 以后，则创建一个包含 "Good evening." 的字符串。使用 if...else 语句的等效代码如下： var now = new Date();
    var greeting = "Good";
    if (now.getHours() > 17)
       greeting += " evening.";
    else
       greeting += " day.";
    要求