0

我的意图是在加载 div 中的图像时#photo_1出现。.slideDown随后，#photo_2当（其相应的缩略图 div）#thumb_2被单击时，（和 on）将出现。

现在，#imgwrap它包围#photo_1并且是一个占位符，直到#photo_1加载，当#thumb_2被点击并且#photo_2应该出现时，它会一直存在。然后#photo_2出现在下方/与 堆叠在一起#imgwrap。

我想#imgwrap消失，并在单击除初始之外的#photo任何其他内容时出现相应的内容。#thumbs#thumb_1

非常感谢您的帮助！

<--!jquery image animation-->
<script type="text/javascript">
$(window).load(function () {
    $("#photo_1").slideDown(500);
});

 $("#thumb_2").click(function () {
      $("#imgwrap").hide();
    });
    </script>

<!--HTML-->
  <div id="imgwrap">
        <div id="photo_1" style="opacity: 0.0;">
    <img src="images/image.jpg" alt="image 1" /></a>
     </div>
 </div>

 <div id="photo_2" style="display: none;">
    <img src="images/image_2.jpg" alt="image 2" /></a>
     </div>


<div id="thumb_1"><a href="#photo_1" onClick="switch_product_img('photo_1', 4);"><img src="images/image_thumb.jpg" alt="image thumbnail" /></a></div>

<div id="thumb_2"><a href="#photo_2" onClick="switch_product_img('photo_2', 4);"><img src="images/image_2_thumb.jpg" alt="image 2 thumbnail" /></a></div>

<!--JAVASCRIPT IMAGE ON-CLICK DISPLAY-->
<script language="javascript" type="text/javascript">
        function switch_product_img(divName, totalImgs) 
        {
            for (var i=1; i<=totalImgs; i++) 
            {
                var showDivName = 'photo_' + i;
                var showObj = document.getElementById(showDivName);
                if (showDivName == divName)
                    showObj.style.display = 'block';
                else
                    showObj.style.display = 'none';
            }
        }
        </script>
4

1 回答 1

0

您在 jquery 中使用标准 javascript。你改变图片功能太复杂了。

下面的脚本是非常标准的 jquery。当您单击带有类的“a”时thumbs，它将调用函数此脚本将隐藏所有带有类photos的图片并显示带有 id 的图片href。

<script>
$(function(){    //same as .load() but jquery style
  $("#dropimage").slideDown(500);
  $(".thumbs").click(function () {    // functions runs any time a <a href>  
                                      // with class thumbs` is clicked.

      var t = $(this);  // get the <a href> that was clicked.
       $('.photos').hide(); //hide all photos with class photo

      var href = t.attr('href'); //  get the href of the link clicked.
      $(href).show();    //show the photo u need. becauee the link and the
                         //id are the same.
    });

});
</script>

 <div id="photo_1" class="photos">
    <div id="dropimage" style="opacity: 0.0;">
<img src="images/image.jpg" alt="image 1" /></a>
 </div>


 <div class="photos" id="photo_2" style="display: none;">
    <img src="images/image_2.jpg" alt="image 2" /></a>
     </div>


<div id="thumb_1"><a class="thumbs" href="#photo_1"><img src="images/image_thumb.jpg" alt="image thumbnail" /></a></div>

<div id="thumb_2"><a class="thumbs"  href="#photo_2"><img src="images/image_2_thumb.jpg" alt="image 2 thumbnail" /></a></div>

`

于 2012-09-26T03:33:04.220 回答