圖像沒有正確隱藏

我從零開始製作了一個JQuery輪播，到目前爲止代碼很好，它的效果非常好。圖像沒有正確隱藏

主要問題是當我嘗試使用fadeOut函數與fadeIn函數並排使用圖像堆棧時。

我不知道如何使它們重疊。

我試圖玩絕對定位，但沒有運氣。

你可以清楚地看到它，當你走在我的網站http://techyhesh.com/Dogs/

HTML

<div class="carousel"> 

    <div id="background-slideshow"> 

     <div style="display: none;" id="img1" class="slides"> 
      <img src="/2015/03/Carosuel2.png"> 
      <div class="textblock"> 
       <p class="carousel-text1">Slider 1</p> 
       <p class="carousel-text2">His nose gets into everything</p> 
      </div> 
     </div> 
     <div style="display: block;" id="img2" class="slides"> 
      <img src="/2015/03/Carosuel.png"> 
      <div class="textblock"> 
       <p class="carousel-text1">Slider 2</p> 
       <p class="carousel-text2">His nose gets into everything</p> 
      </div> 
     </div> 
     <div style="display:none;" class="SlideJSON">2</div> 
    </div> 

</div>

jQuery(document).ready(function($) { 

var slides= $(".JSONNumber").html(); 

var slides= parseInt(slides); 

var animateInterval; 
var i = 1; 
var x = 2; 

function animate() { 


    $("#img" + i).fadeOut(2000) 
    $("#img" + x).fadeIn(2000); 


    if (i == slidenumber) { 

     $("#img1").fadeIn(2000); 

     i = 1; 
     x = 2; 

    } else { 
     i++; 
     x++; 
    } 

} 

animateInterval = setInterval(animate, 3000); 


})

來源

2015-04-01 Hashey100

請避免鏈接到外部網站，它們很容易鏈接腐爛。改爲將您的示例轉換爲[最小，具體且可驗證的示例]（http://stackoverflow.com/help/mcve）。 – Terry 2015-04-01 18:43:00

我不'看到任何'＃img'元素 – mohamedrias 2015-04-01 18:44:37

根據你的HTML，你使用的選擇是錯誤的。

$("#img" + i)

應該

$("#slideimg" + i)

來源

2015-04-01 18:47:20 mohamedrias

幻燈片中的CSS

，只需添加display: inline-block;

來源

2015-04-01 18:57:37 Sushil

圖像沒有正確隱藏

回答

相關問題