0

我正在尝试创建一个简单的 jquery 图片库，其中单击缩略图按钮（每张图片 1 个）通过淡入淡出交换图像并交换文本标题。

我有包含绝对位于另一个之上的图像的 div，旁边有一个标题，下面有缩略图/按钮。

我写的 jquery 可以工作——除了页面加载时的第一次转换。第一个过渡使目标图像出现，然后淡出，然后淡入。它应该只是淡入。

我是 jquery 的新手，如果这是糟糕的代码，我深表歉意......

谁能告诉我为什么第一次转换不能正常工作？

谢谢

查询：

$(document).ready(function(){
    $('.gallery_button').click(function(){
     $('.gallery_slide').animate( {opacity:0.0}, 2000 );
     $('#slide'+$(this).attr('id')).toggleClass('visible');
     $('#slide'+$(this).attr('id')).animate( {opacity:1.0}, 2000 );
     $('.gallery_caption').hide();
         $('#caption'+$(this).attr('id')).show();
         $('#caption'+$(this).attr('id')).toggleClass('visible');
    });
});

HTML：

<div id="gallery_slider">
<div class="gallery_slide" id="slide1"><img src="img1.jpg"/></div>
<div class="gallery_slide hidden" id="slide2"><img src="img2.jpg"/></div>
<div class="gallery_slide hidden" id="slide3"><img src="img3.jpg"/></div>

<div class="gallery_caption" id="caption1">Caption 1</div>
<div class="gallery_caption hidden" id="caption2"/>Caption2</div>
<div class="gallery_caption hidden" id="caption3"/>Caption3</div>

<div class="gallery_button"><img src="button.gif" id="1"/></div>
<div class="gallery_button"><img src="button.gif" id="2"/></div>
<div class="gallery_button"><img src="button.gif" id="3"/></div>
</div>

CSS：

#gallery_slider{position:relative; height:500px;}
.gallery_slide{position:absolute; top:0; left:0; width:640px; height:480px;}
.gallery_caption{position:absolute; bottom:20px; left:660px; width:160px; min-height:150px;}
.gallery_button{width:10px; height:10px; margin:490px 8px 0 0; float:left;}

.hidden{display:none;}
.visible{display:block; visibility:visible;}
4

3 回答 3

0

这正是这段代码告诉它要做的事情：

 $('#slide'+$(this).attr('id')).toggleClass('visible'); // shows it
 $('#slide'+$(this).attr('id')).animate( {opacity:1.0}, 2000 );  // fades it in

试试这个：

$(document).ready(function () {
  $('.gallery_button img').click(function () {
    var id = this.id;
    $('.gallery_caption').hide();
    $('.gallery_slide').fadeOut(2000, function () {
      $('#caption' + id).show();
      $('#slide' + id).fadeIn(2000);
    });
  });
});

http://jsfiddle.net/mblase75/Utb8f/

于 2013-01-23T20:50:51.160 回答
0

我很想弄清楚如何使用原始格式对原始问题进行排序，因为这是我的第一段 jquery，所以我终于设法让它工作：

$(document).ready(function(){
$('.gallery_button').click(function(){
    var id = this.id;
    $('.gallery_caption:visible').hide();
    $('.gallery_slide:visible').fadeOut(500, function(){
        $('#slide' + id).fadeIn(5000);
        $('#caption' + id).show();
    });
    });
});

感谢大家的投入和帮助

于 2013-01-24T19:00:17.703 回答
0

我无法发表评论，但我想指出您的 HTML 可以通过一些评论来完成。

底部的按钮是嵌套的，因为 div 似乎没有 end 。此外，您的其他一些 div 的格式为

<div />something</div>

代替

<div>something</div>

这是您的代码的清理版本：

<div id="gallery_slider">
<div class="gallery_slide" id="slide1"><img src="img1.jpg"/></div>
<div class="gallery_slide hidden" id="slide2"><img src="img2.jpg"/></div>
<div class="gallery_slide hidden" id="slide3"><img src="img3.jpg"/></div>

<div class="gallery_caption" id="caption1">Caption 1</div>
<div class="gallery_caption hidden" id="caption2">Caption2</div>
<div class="gallery_caption hidden" id="caption3">Caption3</div>

<div class="gallery_button"><img src="button.gif" id="1"/></div>
<div class="gallery_button"><img src="button.gif" id="1"/></div>
<div class="gallery_button"><img src="button.gif" id="1"/></div>
</div>

此外，如果您想查看一些现有的东西（如果您愿意的话，最好使用已经存在并且已经过大量人测试的东西）或者只是想了解其他人是如何做到这一点的之前，我已经通过并发现了一些我认为可以实现您想要实现的流行插件：

希望有帮助。

编辑：

我已经完成并制作了一个小代码片段（用猫来幽默）来举例说明如何在不使用 ID 的情况下做到这一点，因此您可以添加新元素并交换它们而不必担心 ID。

http://jsfiddle.net/Q6agB/1/（第二次编辑后） http://jsfiddle.net/Q6agB/3/（第三次编辑，带评论）

将相关的元素（因此带有标题的图像）保持在一起是很好的，这样您就可以轻松地移动它们，并且当有人扫视您的东西时（可能是您在一段时间内，在您忘记了所有代码之后），他们可以很容易地告诉你你一直在做什么。所以这就是我将标题与图像分组的原因。

这就是你想要达到的目标吗？

于 2013-01-23T21:23:24.687 回答