请各位帮帮忙...

现在需要写一个带上下按钮的图片滚动的效果，希望大家帮帮忙！谢谢啦...

解决方案 »

  1.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <SCRIPT LANGUAGE="JavaScript">
      <!--
            var arryIamge = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg']//四张图片的路径
            var count = 0;        //第一种方法
            function show() {
                count++;
                document.all.imagesID.src = arryIamge[count];
                document.all.imagesID.style.display="block";
                if (count == 4) {
                    count = 0;
                }
            }
            function showDown() {
                count--;
                document.all.imagesID.src = arryIamge[count];
                document.all.imagesID.style.display="block";
                if (count == -1){
                    count = 3;
                }    
            }
            //第二种方法
            function show(unmber) {            if (unmber == "+") {
                    count++;
                }
                if (unmber == "-") {
                    count--;
                }
                document.all.imagesID.src = arryIamge[count];
                document.all.imagesID.style.display="block";
                if (count == -1){
                    count = 3;
                }
                
                if (count == 4) {
                    count = 0;
                }
            }
      //-->
      </SCRIPT>
     </HEAD> <BODY>
      <IMG SRC="images/1.jpg" id="imagesID"><br>
      <input type="button" value="上一张" onClick="show('-')">
      <input type="button" value="下一张" onClick="show('+')">
      </BODY>
    </HTML>
      

  2.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>tab.html</title>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
    .subject {
    border: 1px solid black;
    width: 200px;
    height: 200px;
    }
    </style>
    <script type="text/javascript">
    var imgAry = new Array();
    imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/ed9e7094af4f2677d1135e93.jpg");
    imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/2f78156fb7c8dae681cb4a93.jpg");
    imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/cf4013658b43f3ccf7365493.jpg");
    imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/2f78156fb7c8dae681cb4a93.jpg");
    imgAry.push("http://hiphotos.baidu.com/%BA%EC%C2%A5%C7%E9%C3%CE/pic/item/ed9e7094af1f2677d0135e23.jpg");

         window.onload = function () {
         var oBox = document.getElementById("subjectBox");
         var oShowId = document.getElementById("showId").value;
         var subjectHtml = "";
         for (var i = 1; i <= 4; i++) {
         if (i == oShowId) {
         subjectHtml += "<div id ='div_" + i + "' name='showDiv' style='display: block;' class='subject'>" + i + "<img src='" + imgAry[i-1] + "'/></div>"
         } else {
         subjectHtml += "<div id ='div_" + i + "' name='showDiv' style='display: none;' class='subject'>" + i + "<img src='" + imgAry[i-1] + "'/></div>"
         }
         }
         oBox.innerHTML = subjectHtml;
         //showSubject2("next");
         };
        
         function setHide() {
         var allDiv = document.getElementsByName("showDiv");
         for (var i = 0; i < allDiv.length; i++) {
         if (allDiv[i].style.display != "none") {
         allDiv[i].style.display = "none";
         }
         }
         }
             
        
         //方法一：
         function showSubject(flag) {
        var oShowId = document.getElementById("showId").value;
        var allDiv = document.getElementsByName("showDiv");
        var len = allDiv.length;
        //alert(oShowId + ":" + len);
        setHide();//隐藏所有div
         if (flag == "next") {
         oShowId = eval(oShowId) + 1;
         if (oShowId > len) {
         oShowId = 1;
         }
         document.getElementById("div_" + oShowId).style.display = "block";
         } else {
         oShowId = eval(oShowId) - 1;
         if (oShowId < 1) {
         oShowId = len;
         }
         document.getElementById("div_" + oShowId).style.display = "block";
         }
         document.getElementById("showId").value = oShowId;
         }
        
         //方法二：
         function showSubject2(flag) {
        var allDiv = document.getElementsByName("showDiv");
        for (var i = 0, len = allDiv.length; i < len; i++) {
        if (allDiv[i].style.display == "block") {
         allDiv[i].style.display = "none";
         if (flag == "next") {
         if (i < len) {
         i += 1;
         }
         if (i >= len) {
         i = 0;
         }
         } else {
         if (i > 0) {
         i -= 1;
         }
         if (i <= 0) {
         i = len - 1;
         }
         }
        allDiv[i].style.display = "block";
         break;
         }
        }
        //setTimeout("showSubject2('next')", 1000);//动态更换图片
         }
        </script>
    </head> <body>
    方法1：
    <input type="button" value="上" onclick="showSubject('prev')" />
    <input type="button" value="下" onclick="showSubject('next')" />
    <input type="hidden" id="showId" value="1" />
    <br />
    方法2：
    <input type="button" value="上" onclick="showSubject2('prev')" />
    <input type="button" value="下" onclick="showSubject2('next')" />
    <div id="subjectBox">
    </div>
    </body>
    </html>
    参考：http://blog.csdn.net/IBM_hoojo/archive/2010/06/07/5653246.aspx