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

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

9 个解决方案

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

#2

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

#3

引用 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…

一楼正确！

#4

lightbox

#5

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

#6

数据库中读取出来后转换为：
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>

#7

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

#8

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

#9

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


可以啊顶顶!

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

#2

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

#3

引用 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…

一楼正确！

#4

lightbox

#5

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

#6

数据库中读取出来后转换为：
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>

#7

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

#8

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

#9

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


可以啊顶顶!
标签：

相关文章