图片展示问题，有源码，求救，谢谢大侠

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、<!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">
<head>
<title></title>

<script src="JS/jquery-1.3.2.js"></script>
<script>
         // 怎么做? 让我们看一段程序。
         var myshow, mywidth, myheight, showpic, mytitle, mynext, myprev, mylength, index, temp, shownext, showprev;

         // 先将会用到的变量作一个设定.
         // 我们设定一个数组w,并求取所有图片的个数,然后利用一个each()循环将.popshow的Img 利用clone() 复制一份,放到w里,如此一来我们就有
         // 一个所有图文件img对象的数组,可以让我们随时调用。
         var w = new Array();
//         mylength = $(".popshow img").size();
//         $(".popshow img").each(function(e){
//             temp = $(this).clone();
//             w[e] = temp;
//         });
//
//         $(".popshow img").click(function(){
//             myshow = $(".popshow img").index(this);
//             doimg(myshow);
//             return false;
//         });

         // 测试数组并输出至控制台
         //$.each(w, function (e, i) {
         //    console.log("e:" + e + "- i" + i.href + "-");
         //});

         // 我们先定义当.popshow 下的img 被Click时要做的事情
         // 使用index()求得目前被按的图形在.popshow下img的index是什么,求得的是一个数值,将这个数值传给子程序doimg(),所以我们使用doing(myshow)
         // 为什么要设定一个子程序,doimg()？因为鼠标按下要求做展示的有两个以上的部位，一个是图形，一个是Next的对象,一个是Prev的对象
         // 为免程序代码重复,所以我们写了一个专门做图形展示的子程序doimg();
         // myshow = $(".popshow img").index(t);
         // 让我们来看一下doimg()
         function doimg(obj){
             //console.log(index);
             /// 首先把正在展示的对象(如果有的话,Id = this_show)清除掉,因为doimg会要求传入一个值(index),这个值就是要展示的图形的index值.
             /// 其用parseInt()（避免字符串而不可以计算）变成可以计算的变量,下一张的mynext就是传入值加1的值,前一张就是传入值减1的值
             /// 如果下一张的index值大于或等于图形个数,mynext 就是0 如果上一张小于0 就是图形个数减1作为数组最后的index来展示。
             $("#this_show").remove();
//             index = parseInt(index);
//             mynext = index + 1;
//             myprev = index - 1;
//             if (mynext >= mylength) {
//                 mynext = 0;
//             }
//             if (myprev < 0) {
//                 myprev = mylength - 1;
//             }

             /// 将要展示的图形从w的数组中引到变量kkk里,我们利用new Image()的方法建立一个
             /// 新的图形对象,主要的原因是想要找出将要展示的（大图）的宽与高,因为等一下我们要求出的宽与高
             /// 来定位图形的显示位置,让其显示整个网页的正中央,并借此调整Next,Prev与文字说明的位置
             var kkk = obj; //w[index];
             var myImage = new Image();
             myImage.src = $(kkk).attr('rel')
             // 求得大图的src位置
             mytitle = $(kkk).attr('alt')
             // 求得文字说明
             mywidth = 500;
             // 大图的宽
             myheight = 375;
            /// debugger;
             // 大图的高
             showpic = '<img src=' + myImage.src + '>';
             // showpic已有目前要展示的大图的完整Html描述

             // 将showpic加入id=this_show并加入css的class pop(已设定于网页中),且加入定位的Css信息,
             // 完成后将其用appendTo()加入网页的body后面,并将其隐藏。
             $(showpic).attr("id", "this_show").addClass('pop').css({
                 'left': ($('body').width() - mywidth) / 2,
                 'top': 100,
                 'width': mywidth,
                 'height':myheight
             }).appendTo('body').hide();

             $('.popshow').css({ 'opacity': 0.4 });
             // 将原本的小图串(.popshow)的透明度减到0.4
             $("#dis").css({
                 'left': ($('body').width() - mywidth) / 2,
                 'top':100,'opacity':0.7
             }).html(mytitle);

             // Next
             $("#next").css({
                 'left': ($('body').width() + mywidth - 70) / 2,
                 'top':460,'opacity':0.7
             });

             // Prev
             $("#prev").css({
                 'left': ($('body').width() - mywidth) / 2,
                 'top':460,'opacity':0.7
             });

             // 对prev定位与降低透明度
             shownext = '<a href=# rel='+mynext+'>Next</a>';
             showprev = '<a href=# rel='+myprev+'>PREV</a>';

             // 产生Next与Prev的链接与文字
             // 将产生的链接分别写入next与prev的DIV中
             $("#next").html(shownext);
             $("#prev").html(showprev);


             $('.more').show("fast");
             $("#this_show").fadeIn("slow");
             return false
         }

         // 因为当初我们在产生next及prev的链接时就已将下一张的index放在链接a的rel里面，
         // 现在我们将其取出来并直接调用doimg(),将index传给它。
         //
         $("#next").click(function () {
             var nindex = $("#next a").attr('rel');
             doimg(nindex);
             return false
         });

         $("#prev").click(function () {
             var pindex = $("#prev a").attr('rel');
             doimg(pindex);
             return false;
         });

         // 最后我们要设定一个关掉展示与还原图片（小图）的透明度功能。
         $(document).click(function(){
             $('.popshow').css({ 'opacity': 1 });
             $(".more").hide();
             $("#this_show").remove();
         }); </script>
</head><style>
      html
      {
          /*background-color:black;*/
          font:70% Verdana;
          color:#ACACB0
      }
      a{
       color:white;
       text-decoration: none;
       font-weight: bold;
       border-bottom: 1px dotted black;
       cursor: help;
      }
      img.pop{
      position: absolute;
      border: 10px solid #214263;
      z-index: 1;
      }
      .more{
      background: #214263;
      color:white;
      position: absolute;
      border: 10px solid #214263;
      z-index: 2;
      }
  </style>
<body>  <center>
    <b>Image Gallery</b>
    </center>
    <div class="popshow">
        <img src="Data/temp/DVC00071_022bmf55linj2lqocswozw45.jpg" width="120" height="90" alt="Image Gallery #1" rel=Data/temp/DVC00071_022bmf55linj2lqocswozw45.jpg>
        <img src="Data/temp/DVC00071_022bmf55linj2lqocswozw45.jpg" width="120" height="90" alt="Image Gallery #2" rel=Data/temp/DVC00071_022bmf55linj2lqocswozw45.jpg>
        <img src="Data/temp/DVC00071_022bmf55linj2lqocswozw45.jpg" width="120" height="90" alt="Image Gallery #3" rel=Data/temp/DVC00071_022bmf55linj2lqocswozw45.jpg>
        <img src="Images/look.png" alt="Image Gallery #3" rel="Data/temp/DVC00071_022bmf55linj2lqocswozw45.jpg"  onclick="doimg(this);">
    </div>

</body>
</html>
小弟初次用jquery，搞了一天没明白为什么不行。大侠帮忙看看，万分感谢

调试易

图片展示问题，有源码，求救，谢谢大侠

解决方案 »