javascript - 每次加载下一张图片之前，第一张图片都会变得可见

Question

这是我的网站http://www.alienchela.com/portfolio.html .

先点击任意客户端图片即可。

但是如果你每次都点击next按钮那么你就可以看到了。首先是上一张图片，然后是下一张图片。

代码如下:

var ticker = $('.img_wrap');
            $('.next').click(function () {
                $('.img_panel:visible').fadeOut(1000, function() {
                        $(this).appendTo(ticker);
                        ticker.children().first().show(function(){
                            var artit = $(this).attr('title');
                            $(this).load(artit+'.txt');
                });
                    });
                $(ticker).hide().delay(1500).fadeIn(1000);
            });

我做了一个破解。我做了一些延迟的过渡。

$(ticker).hide().delay(1500).fadeIn(1000); 

我不太擅长是 JS。

感谢任何帮助。

Answer 1

给你:

分析

1。初始状态

<div class="img_wrap">
    <div class="img_panel" title="pixi">pixi</div>
    <div class="img_panel" title="mus">mus</div>
    <div class="img_panel" title="flash">flash</div>
    <div class="img_panel" title="dir">dir</div>
    <div class="img_panel" title="rpi">rpi</div>
    <div class="img_panel" title="ac">ac</div>
    <div class="img_panel" title="css">css</div>
    <div class="img_panel" title="nagraj">nagraj</div>
</div>

2。点击“AC”

<div class="img_wrap">
    <div class="img_panel" title="pixi">
        <img src="img/clients/ac/ac_top.jpg" width="1040" height="217" alt="aucourant"><img src="img/clients/ac/ac1.jpg" width="1040" height="502" alt="aucourant">
    </div>
    <div class="img_panel" title="mus">
        <img src="img/clients/ac/ac_top.jpg" width="1040" height="217" alt="aucourant"><img src="img/clients/ac/ac1.jpg" width="1040" height="502" alt="aucourant">
    </div>
    <div class="img_panel" title="flash">
        <img src="img/clients/ac/ac_top.jpg" width="1040" height="217" alt="aucourant"><img src="img/clients/ac/ac1.jpg" width="1040" height="502" alt="aucourant">
    </div>
    <div class="img_panel" title="dir">
        <img src="img/clients/ac/ac_top.jpg" width="1040" height="217" alt="aucourant"><img src="img/clients/ac/ac1.jpg" width="1040" height="502" alt="aucourant">
    </div>
    <div class="img_panel" title="rpi">
        <img src="img/clients/ac/ac_top.jpg" width="1040" height="217" alt="aucourant"><img src="img/clients/ac/ac1.jpg" width="1040" height="502" alt="aucourant">
    </div>
    <div class="img_panel" title="ac" style="display: block;">
        <img src="img/clients/ac/ac_top.jpg" width="1040" height="217" alt="aucourant"><img src="img/clients/ac/ac1.jpg" width="1040" height="502" alt="aucourant">
    </div>
    <div class="img_panel" title="css">
        <img src="img/clients/ac/ac_top.jpg" width="1040" height="217" alt="aucourant"><img src="img/clients/ac/ac1.jpg" width="1040" height="502" alt="aucourant">
    </div>
    <div class="img_panel" title="nagraj">
        <img src="img/clients/ac/ac_top.jpg" width="1040" height="217" alt="aucourant"><img src="img/clients/ac/ac1.jpg" width="1040" height="502" alt="aucourant">
    </div>
</div>

解释

每个 img_panel 都有“AC”的标题图像。而且它们没有 CSS display:none;，这意味着这些 div 是可见的。当你执行时，

$('.img_panel:visible').fadeOut(1000, function() {
    $(this).appendTo(ticker);
    ticker.children().first().show(function(){
        var artit = $(this).attr('title');
        $(this).load(artit+'.txt');
});

当前项目隐藏，下一个显示。在过渡期间，当前和下一个项目都将被部分隐藏，背景 div 中的图像显示。

有问题的代码

$('.work li').click(function(){
    var clientitle = $(this).attr('title');
    $('.work').fadeOut(500), $('.big_images').delay(500).fadeIn();
    $('.img_panel[title="'+clientitle+'"]').fadeIn();
    var cltxt = clientitle+'.txt'
    $('.img_panel').load(cltxt);
});

解决方案

// Only load data to active div
$('.img_panel[title="' + clientitle + '"]').load(cltxt);

此外，最好这样做:

// Hide all divs
$('.img_panel').hide();
// Load and unhide active div
$('.img_panel[title="' + clientitle + '"]').load(cltxt).show();

---

问题2

当你点击“AC”然后点击Next时，代码变成这样:

<div class="img_wrap" style="display: block;">
    <div class="img_panel" title="pixi" style="display: block;">...</div>
    <div class="img_panel" title="mus">...</div>
    <div class="img_panel" title="flash">...</div>
    <div class="img_panel" title="dir">...</div>
    <div class="img_panel" title="rpi">...</div>

    <div class="img_panel" title="css">...</div>
    <div class="img_panel" title="nagraj">...</div>
    <div class="img_panel" title="ac" style="display: none;">...</div>
</div>

看，ac 元素排到最后，导致下一次迭代的顺序错误。

解决方案

不需要重新排列 div 元素。只需使用标题数组和索引来处理 next 和 prev。