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


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

解决方案 »

  1.   

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

  2.   

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

  3.   

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

  4.   

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