在下一張圖片加載前，每次都會顯示第一張圖片

這是我的網站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。

任何幫助表示讚賞。

來源

2013-02-04 sandeep

不錯的設計，我喜歡它 – kidwon

@kidwon謝謝:) – sandeep

哪個瀏覽器出現這個問題？ –

在這裏你去：

分析

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-17 09:06:22 ATOzTOA

感謝您的回答抱歉，但這沒有幫助。但是，我注意到發生了什麼問題。在這裏，當我點擊.work li ** $（'。img_panel：visible'）.load（cltxt）; ** – sandeep

它可以解決重複圖像問題。您可以訪問網站。 – sandeep

@sandeep你的代碼（'$（'。img_panel：visible'）.load（cltxt）;'）將不起作用。嘗試點擊「菜單」，然後點擊一個項目，然後點擊「下一步」。我仍然可以在您的網站上看到它。問題是，直到'fadeIn'結束之前，div纔會變成'visible'。 – ATOzTOA

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

默認順序爲：陂溪萬畝閃光燈DIR RPI交流CSS nagraj。

與您的代碼的問題是，當頁面加載新鮮，你從菜單中選擇一個圖像，它會帶你在那裏。它假設，一旦它把你帶到那裏，活躍的div就在頂端，當它可能在任何地方，包括中間。

爲了解決這個問題，你需要將ticker中的所有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); 
});

像這樣的東西應該解決的問題：

$('.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-04 20:19:15 Lrdwhyt

感謝您的回答，但它仍然無法正常工作。 – sandeep

@sandeep你確定嗎？我用Firebug自己測試過它，它工作。確保你在編輯script/main。js並替換'$（「.work li」）。click（）'完全 - 我沒有看到任何更改。 – Lrdwhyt

對不起@Lrdwhyt的回覆。是的，我更換了代碼，但它不起作用。 – sandeep

它必須是這樣的一個錯誤或跨瀏覽器的問題，因爲它在IE-8和mozilla 18.0.2中運行良好，第一次加載圖像只發生在第一輪下一個按鈕，然後顯示正確。一個可能的錯誤可能是在。孩子（）函數，這裏所說的 - What is the difference between children and childNodes in JavaScript?

來源

2013-02-17 06:30:07

在linux下debian 7.0出現Iceweasel 10.0.12錯誤。事實上，第一次從網站加載圖像時，它會從上到下完整地顯示一張圖像，然後在相同的圖像上進行回放和下一張圖像時，它會像從左向右一樣正確顯示圖像。 –

建議... 添加類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-20 20:26:31 xpy

感謝您的回答，但它沒有完成循環。 – sandeep

我改了一點代碼，所以現在可能會好起來的... – xpy

看起來你錯過了這個事實在你的代碼中，你啓動了一個空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-21 12:11:42 strah

在下一張圖片加載前，每次都會顯示第一張圖片

回答

相關問題