4

这是我的网站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。

任何帮助表示赞赏。

4

5 回答 5

6

干得好：

分析

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.点击“交流”

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

于 2013-02-17T09:06:22.873 回答
2

建议...当您第一次访问它时，将一个类添加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当没有任何活动时从每个元素中删除类......

于 2013-02-20T20:26:31.067 回答
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 位于顶部，而它可能位于任何位置，包括中间。

为了解决这个问题，您希望将所有 divticker移到底部，以便保留 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);
});
于 2013-02-04T20:19:15.063 回答
2

您似乎错过了在代码中启动空 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()});
    });
});

不确定上面的代码是否会立即工作，但你明白了。

于 2013-02-21T12:11:42.847 回答
2

它一定是错误或跨浏览器问题，因为它在 IE-8 和 mozilla 18.0.2 中运行良好。第一个图像加载仅发生在第一轮下一个按钮，之后它正确显示。此处提到的 .children() 函数中可能存在一个错误 - JavaScript 中的 children 和 childNodes 有什么区别？

于 2013-02-17T06:30:07.847 回答