jquery仿163图片查看
%77w%77%2Ef%6F%72p%73%70%2Ec%6E
做了一个jquery图片查看小程序,带代码如下 仿163的图片查看
<script language="javascript" src="/js/jquery-1.4.4.min.js"></script>
<script language="javascript">
<!--
$(function(){
$(".smpic >img").each(function(i){$(this).click(function(){$("#nowimg").attr("src",$(this).attr("src"));});});
$("#upimg").click(function(){
var num = $(".smpic >img").length;
var nownum = 0;
for(i=0;i<num;i++){
if($(".smpic >img:eq("+i+")").attr("src")==$("#nowimg").attr("src"))nownum = i-1;
}
if(nownum<0)nownum = num-1;
$("#nowimg").attr("src",$(".smpic >img:eq("+nownum+")").attr("src"));
});
$("#downimg").click(function(){
var num = $(".smpic >img").length;
var nownum = 0;
for(i=0;i<num;i++){
if($(".smpic >img:eq("+i+")").attr("src")==$("#nowimg").attr("src"))nownum = i+1;
}
if(nownum>=num)nownum = 0;
$("#nowimg").attr("src",$(".smpic >img:eq("+nownum+")").attr("src"));
});
});
-->
</script>
下面是页面代码
<div class="pp">
<div class="jt"><a href="#"><img id="upimg" src="../images/jtleft_pic.jpg" alt="上一张" border="0"></a></div>
<div class="dtu"><img id="nowimg" src="/eshop/images/1305774127.jpg" width="600" height="400" border="0"></div>
<div class="jt"><a href="#"><img id="downimg" src="../images/jtright_pic.jpg" alt="下一张" border="0"></a></div>
<div class="smpic">
<img src="/eshop/images/1305774127.jpg" border="0" height="90" width="60">
<img src="/eshop/images/1305774102.jpg" border="0" height="90" width="60">
<img src="/eshop/images/1305774082.jpg" border="0" height="90" width="60">
</div>
主要实现的是上一个图片,下一个图片,还有点击某个图片显示那个图片,有待优化。
http://www.forasp.cn/