Question

我的意图是在加载div中的图像时#photo_1显示.slideDown。随后，当点击（相应的缩略图div）#photo_2时，会显示#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>

Answer 1

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

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

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

`

Jquery图片库.click失败

1 个答案: