我想制作一个图片库,我只需单击图像左半部分的任意位置以获取上一张照片,并单击照片右侧的任意位置以获取下一张照片。我在设置 jQuery 时遇到问题
我有这个 html 代码
<tr><td align="center" width="6%"><span id="picviewer-prev" class="picviewer-area"><span></span></span><strong><a id="picviewer-prev" onclick="jQuery.image({ ajax: 'http://way2enjoy.com/jquery/photolove/785' });return false;" href="#"><img align="absmiddle" src="js/left.png"></a></strong></td><td width="57%" align="center">
<div id="imgtag" style="width:600px;"><img src="/upload/media_files/00/00/00/47/51/4751.photo.jpg" style="max-width:600px;margin-bottom:-3px;"></div></td><td align="top" width="6%"><span id="picviewer-next" class="picviewer-area"><span></span></span><strong><a id="picviewer-next" onclick="jQuery.image({ ajax: 'http://way2enjoy.com/jquery/photolove/787' });return false;" href="#"><img align="absmiddle" src="js/right.png"></a></strong></td><td width="31%" valign="top" style="background:#fff;overflow:hidden;"></td><td width="400" valign="top" style="padding-left:30px"><div class="hr"></div></td></tr>
CSS 代码
<style>
#picviewer-prev
{
left: -150px;
right: 50%;
}
.picviewer-area {
bottom: 0;
cursor: pointer;
display: block;
position: absolute;
top: 0;
z-index: 10;
}
#picviewer-next {
left: 50%;
right: -150px;
}
.picviewer-area {
bottom: 0;
cursor: pointer;
display: block;
position: absolute;
top: 0;
z-index: 10;
}
</style>
jQuery
<script type="text/javascript">$(document).ready(function()
{ $("#picviewer-prev").click( prev );
$("#picviewer-next").click( prev );
});</script>
但是当我点击图像时,什么也没有发生。我认为我的 jQuery 是错误的。