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

Question

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

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

但是，如果您每次都点击下一个按钮，那么您可以看到。首先是前一张图像，然后下一张图像就会加载。

以下是代码：

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。

Answer 2

var ticker = $('.img_wrap');
$('.next').click(function () { //When the next button is clicked
  $('.img_panel:visible').fadeOut(1000, function() { //Fade out the current active image
    $(this).appendTo(ticker); //And move its div to the bottom of ticker
    ticker.children().first().show(function(){ //Then show the first div in ticker
      var artit = $(this).attr('title');
      $(this).load(artit+'.txt');
    });
  });
  $(ticker).hide().delay(1500).fadeIn(1000);
});

默认顺序为：pixi mus flash dir rpi ac css nagraj。

您的代码存在的问题是，当新加载页面并从菜单中选择图像时，它会将您带到那里。它假设，一旦它带你到那里，活动div在顶部，当它可能在任何地方，包括中间。

要解决此问题，您希望将ticker中的所有div移动到底部，以便保留pixi mus flash dir rpi ac css nagraj的原始顺序，但是活动的那个是顶部的应该是。

当您从菜单中选择一个项目时，您的相关代码实际上就在这里：

$('.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);
});

这样的事情可以解决问题：

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

Answer 3

它必须是类似于bug或跨浏览器的问题，因为它在IE-8和mozilla 18.0.2中运行良好。第一次图像加载仅发生在第一轮下一个按钮，之后它正确显示。一个可能的错误可能出现在这里提到的.children（）函数中 - What is the difference between children and childNodes in JavaScript?

Answer 4

...建议 首次访问时，将active课程添加到有效.img_panel，然后使用类似的内容进行导航：

var ticker = $('.img_wrap');
$('.next').off('click').click(function () {
   ticker.fadeOut(500,function(){
   var $current = $('.img_panel.active');
   var nextIndex = ($current.index()+1)<$('.img_panel').length?$current.index()+1:0;
   var $next = $('.img_panel').eq(nextIndex);
   $current.hide().removeClass('active');
   $next.show(function(){
      var artit = $(this).attr('title');
      $(this).load(artit+'.txt',function(){
         ticker.fadeIn(500)}).addClass('active');
      });
   });             
});

对于上一个功能，只需更改

var nextIndex = ($current.index()+1)<$('.img_panel').length?$current.index()+1:0;

到

var nextIndex = ($current.index())>0?$current.index()-1:$('.img_panel').length-1;

我认为这将完成工作和循环......（当我测试时它会这样做）只记得在没有任何活动时从每个元素中删除active类...

Answer 5

您似乎错过了在代码中启动空div转换的事实。转换完成后，您开始将内容加载到该div中。

所以你应该这样做：

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

不确定上面的代码是否会立即生效，但您明白了。