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.「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です。

于 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);
});

デフォルトの順序は次のとおりです。piximusflashdir rpi accssnagraj。

コードの問題は、ページが新しく読み込まれ、メニューから画像を選択すると、そこに移動することです。そこに移動すると、アクティブな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);
});
于 2013-02-04T20:19:15.063 に答える
2

IE-8とmozilla18.0.2で正常に機能するため、バグやクロスブラウザの問題のようなものである必要があります。最初の画像の読み込みは次のボタンの最初のラウンドでのみ発生し、その後は正しく表示されます。考えられるバグは、ここで説明したように.children（）関数にある可能性があります-JavaScriptのchildrenとchildNodesの違いは何ですか？

于 2013-02-17T06:30:07.847 に答える
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 に答える