怎么实现点击图片连接到下一张图片?或是点击图片左边链接到上一张点击图片右边链接到下一张？

myfuturemydream08 2009-04-23 07:00:39

两种实现都行。第二种好像是用热区，但我不会，js也不大会，麻烦各位高手能说的清楚点吗，我明早就得交给老板啊，谢谢啊

...全文

1544 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

happy664618843 2009-04-25

打赏
举报

[Quote=引用楼主 myfuturemydream08 的帖子:]
两种实现都行。第二种好像是用热区，但我不会，js也不大会，麻烦各位高手能说的清楚点吗，我明早就得交给老板啊，谢谢啊
[/Quote]

可以啊顶顶!

myfuturemydream08 2009-04-25

打赏
举报

谢谢你，不过，我的图片是在数据库中读取出来的。我现在实现的是第一种，点击图片跳到下一张。有空我再看看第二种吧

renzaijiang 2009-04-25

打赏
举报

index=document.getElementbyId("imageScroll").index <(images.length-1)?
(++document.getElementbyId("imageScroll").index):0;
改下

renzaijiang 2009-04-25

打赏
举报

<body onload="javascript:document.getElementbyId("imageScroll").src=images[0]">
<image index=0 onclick=nextImage() id="imageScroll" />
<script>images=new Array();</script>
<%
while(!rs.eof)
{
%>
<script>
images.push(<%=rs("imagePath")%>);
</script>
<%
}%>
<script>
function nextImage()
{
index=document.getElementbyId("imageScroll").index<images.length?document.getElementbyId("imageScroll").index++:0;
document.getElementbyId("imageScroll").src=image[index];
}
}
<script>
</body>

caiying2009 2009-04-25

打赏
举报

数据库中读取出来后转换为：
var pic=[
['images/1.jpg','photo-1'],
['images/2.jpg','photo-2'],
['images/3.jpg','photo-3'],
['images/4.jpg','photo-4'],
['images/5.jpg','photo-5'],
['images/6.jpg','photo-6']
]
即可



<!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" xml:lang="zh-CN" lang="zh-CN">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>图片播放_点击</title>

</head>

<body>



<div id=picdiv style="font-size:0px;padding:0;width:300px;height:300px;border:0px red solid;text-align:center">

    <img id=pic_ad src="images/1.jpg" style="margin:0;width:300px;height:300px;CURSOR: pointer;FILTER:revealTrans(duration=2,transition=20)" alt='点击显示下一张' border=0 onclick="showphoto()">

    <span id="pic_inf" style="font-size:12px;line-height:20px;width:300px;height:20px;background:#efefef;display:block">

	photo-123456-1</span>

</div>

<br style="clear:both">



<script language="javascript">

<!--

var pic=[

['images/1.jpg','photo-123456-1'],

['images/2.jpg','photo-123456-2'],

['images/3.jpg','photo-123456-3'],

['images/4.jpg','photo-123456-4'],

['images/5.jpg','photo-123456-5'],

['images/6.jpg','photo-123456-6']

]

var picNo=0

function showphoto(){

    picNo++

    if (picNo>=pic.length)picNo=0

	document.getElementById("pic_inf").innerHTML=pic[picNo][1]

    with(document.getElementById("pic_ad")){

	    filters.revealTrans.Transition=Math.floor(Math.random()*23)//变换特效，可以去掉

	    filters.revealTrans.apply()//变换特效，可以去掉

	    src=pic[picNo][0]

	    filters.revealTrans.play()//变换特效，可以去掉

    }

}

//-->

</script>



</body>

</html>

iamknight 2009-04-24

打赏
举报

lightbox

robyjeffding 2009-04-23

打赏
举报

[Quote=引用 1 楼 caiying2009 的回复:]
HTML code
<!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" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>图片播放_热区_提示</title>
</head>
<body>

<div id=picdiv style="width:300px;height:300px;border:0px…
[/Quote]
一楼正确！

staywithc 2009-04-23

打赏
举报

搜索一下LightBox，拿来直接用啊

caiying2009 2009-04-23

打赏
举报



<!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" xml:lang="zh-CN" lang="zh-CN">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>图片播放_热区_提示</title>

</head>

<body>



<div id=picdiv style="width:300px;height:300px;border:0px red solid;text-align:center">

	<map name="FPMap0">

	<area href="###" shape="rect" coords="0, 0, 150, 300" onclick="showphoto(-1);this.blur();"alt="上一张">

	<area href="###" shape="rect" coords="150, 0, 300, 300" onclick="showphoto(1);this.blur();"alt="下一张">

	</map>

	<img id=pic_ad src="images/1.jpg" style="width:300px;height:300px;" usemap="#FPMap0" border=0>

	<span id="pic_inf" style="font-size:12px;line-height:20px;width:300px;height:20px;background:#efefef;display:block">photo-1</span>

</div>



<br style="clear:both">



<script language="javascript">

<!--

var pic=[

['images/1.jpg','photo-1'],

['images/2.jpg','photo-2'],

['images/3.jpg','photo-3'],

['images/4.jpg','photo-4'],

['images/5.jpg','photo-5'],

['images/6.jpg','photo-6']

]

var picNo=0

function showphoto(k){

	picNo+=k

	if (picNo>=pic.length)picNo=0

	if (picNo<0)picNo=pic.length-1

	document.getElementById("pic_ad").src=pic[picNo][0]

	document.getElementById("pic_inf").innerHTML=pic[picNo][1]

}

//-->

</script>



</body>

</html>