图片浏览器

edgarcaya 2010-06-09 04:48:00

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

...全文

897 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

败家子 2011-01-06

打赏
举报

我来看看

edgarcaya 2010-06-11

打赏
举报

使用表格做，是不是太。。。。。

edgarcaya 2010-06-11

打赏
举报

[Quote=引用 5 楼 zyzy15 的回复:]

HTML code

<style>
img {border:1px solid gray; margin:1px; cursor:hand}
</style>
大图和小图文件名相同，存放在不同路径中<BR>
大图存放在S1文件夹下，小图存放于S5文件夹下
<TABLE>
<TR>
<TD><img id="bigpic" src="http://img10.360buy……
[/Quote]

这个确实是这个样子，但是少了功能，在图片列表点击图片的时候滑动图片的效果没有，还有图片的大小随大图显示的大小一致，我想知道限定大小怎么弄

marveson 2010-06-11

打赏
举报

www.sharejs.com

edgarcaya 2010-06-11

打赏
举报

[Quote=引用 4 楼 xk1126 的回复:]

引用 3 楼 edgarcaya 的回复:
引用 1 楼 xk1126 的回复:

table+div
然后控制图片显示和隐藏
给你写了个图片的显示和隐藏，
你把那下拉框里的图片放到table里然后控制大小
然后响应图片的onClick事件
JScript code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transition……
[/Quote]

请问怎么放入到你说的下拉列表框里，我想设计个横向的。点击图片的时候，要有滑动的效果。不要插件。

zyzy15 2010-06-10

打赏
举报



 <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>

xk1126 2010-06-10

打赏
举报

[Quote=引用 3 楼 edgarcaya 的回复:]
引用 1 楼 xk1126 的回复:

table+div
然后控制图片显示和隐藏
给你写了个图片的显示和隐藏，
你把那下拉框里的图片放到table里然后控制大小
然后响应图片的onClick事件
JScript code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>……
[/Quote]

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

edgarcaya 2010-06-10

打赏
举报

[Quote=引用 1 楼 xk1126 的回复:]

table+div
然后控制图片显示和隐藏
给你写了个图片的显示和隐藏，
你把那下拉框里的图片放到table里然后控制大小
然后响应图片的onClick事件
JScript code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document……
[/Quote]
你这是完全COPY过来的，都没看需求。

hibin101 2010-06-09

打赏
举报

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>

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

xk1126 2010-06-09

打赏
举报

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>