网站制作学习网JS脚本→正文:jquery仿163图片查看
字体:

jquery仿163图片查看

JS脚本 2011/5/19 18:10:16  点击:不统计

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

·上一篇:Jquery鼠标事件包含子元素 >>    ·下一篇:仿阿里巴巴分块导航代码 >>
推荐文章
最新文章