图片浏览器

效果类似百度的图片浏览器，中间一张大图，右边一个纵向的滚动条，点击滚动条内的图片，大图会随之改变，这个要怎么通过HTML JAVASCRIPT CSS DOM来做。请给出思路，和具体相关技术。如有源码更好，谢谢。

解决方案 »

  1.   

    table+div
    然后控制图片显示和隐藏
    给你写了个图片的显示和隐藏，
    你把那下拉框里的图片放到table里然后控制大小
    然后响应图片的onClick事件<!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.0 Transitional//EN">
    <HTML>
     <HEAD>
      <TITLE> New Document </TITLE>
      <SCRIPT LANGUAGE="JavaScript">
      <!--
            var arryIamge = ['images/one.jpg','images/two.jpg','images/three.jpg','images/four.jpg']//四张图片的路径
            var count = 0;
            function show() {
                document.all.imagesID.src = arryIamge[count];
                document.all.imagesID.style.display="block";
                count++;
                if (count == 4) {
                    count = 0;
                }
                setTimeout("show()",1000);

            }        
      //-->
      </SCRIPT>
     </HEAD> <BODY onLoad="show()">
      <IMG SRC="images/one.jpg" id="imagesID"><br>
      </BODY>
    </HTML>
      

  3.   

    你这是完全COPY过来的，都没看需求。
      

  4.   


    晕！我自己写的！~~~
    我知道你的需求！~~
    我这是大图片的显示
    像小图片你放到下啦列表框里，然后设置change事件来显示图片
      

  5.   


     <style>
     img {border:1px solid gray; margin:1px; cursor:hand}
     </style>
     大图和小图文件名相同，存放在不同路径中<BR>
     大图存放在S1文件夹下，小图存放于S5文件夹下
    <TABLE>
      <TR>
        <TD><img id="bigpic" src="http://img10.360buyimg.com/S1/4633/67599a06-edbc-4a07-87a2-8a6db67eb7b3.jpg" border="1"></TD>
        <TD>
    <div id="div1" style="width:70px; height:260px; overflow-x:hidden; overflow-y:scroll">
    <!-- 小图列表 -->
    </div>
        </TD>
      </TR>
      </TABLE>
      <SCRIPT LANGUAGE="JavaScript">
      <!--
    var arr = new Array(); //小图路径数组
    arr = [
    "http://img10.360buyimg.com/S5/4633/67599a06-edbc-4a07-87a2-8a6db67eb7b3.jpg",
    "http://img10.360buyimg.com/S5/3474/8d7b3df9-c57c-424e-8805-004b2c2bb819.jpg",
    "http://img10.360buyimg.com/S5/2585/aef504c7-31af-41af-90ba-7c48e4e17682.jpg",
    "http://img10.360buyimg.com/S5/443/8fd17e13-a911-4b64-97f1-e49395a028ab.jpg",
    "http://img10.360buyimg.com/S5/2918/61e6ef8f-22fc-4d1d-ae6c-d173cb0ff3d5.jpg"
    ];
    //将小图塞入列表
    for (var i=0; i<arr.length; i++)
    {
    var img = document.createElement("img"); //创建元素
    img.src = arr[i]; //写入小图路径
    img.onclick = function(){big(this)}; //增加点击事件
    document.getElementById("div1").appendChild(img); //塞入列表
    }
    //点击看大图
        function big(obj){
            document.getElementById("bigpic").src = obj.src.replace("S5","S1"); //大图路径 = 将小图路径中的"S5"替换为"S1"
        }
      //-->
      </SCRIPT>