滑塊圖片放大站點高度

我爲我的站點創建滑塊，但它的劑量效果很好。問題是當圖片滑落時，它會放大我的站點高度。如何解決它？滑塊位於網站底部的#opinionsPanel內。我把整個項目放在https://github.com/mituraTomasz/stronka/tree/master/stronka。請幫忙！滑塊圖片放大站點高度

$(document).ready(function() { 
 

 
    var duration = 10000; 
 
    var imageUrl = "/img/slider/slider"; 
 
    var counter = 1; 
 

 
    function runSlider() { 
 

 
    if (counter == 4) { 
 
     counter = 1; 
 
    } else { 
 
     counter++; 
 
    } 
 
    $("#slider").fadeOut("fast", function() { 
 
     $("#slider") 
 
     .html("<img src=" + imageUrl + counter + ".jpg alt='slider'>") 
 
     .fadeIn("fast", "linear"); 
 

 
     if (counter % 2 == 1) { 
 
     $("#slider img") 
 
      .animate({ 
 
      top: '-=400px' 
 
      }, 0) 
 
      .animate({ 
 
      top: '+=400px' 
 
      }, duration); 
 
     } else { 
 
     $("#slider img").animate({ 
 
      top: '-=400px' 
 
     }, duration); 
 
     } 
 
    }); 
 

 
    } 
 
    runSlider(); 
 
    setInterval(runSlider, duration + 1000); 
 

 

 
});

body{ 
 
    height: 700px; 
 
    background-color: brown; 
 
    
 
} 
 

 
#slider { 
 
    padding: 0; 
 
    margin: 0; 
 
    width: 100%; 
 
    height: 600px; 
 
    filter: blur(2px); 
 
    //background-size:cover; 
 
    //background-position: 50%; 
 

 
} 
 
img { 
 
    background-size: cover; 
 
    position: absolute; 
 
    //top: 2200px; 
 
    //vertical-align: top; 
 
    //overflow:hidden; 
 
    z-index: -1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 

 
    <div id="opinionsPanel"> 
 
    <div id="opinionsContent"> 
 
     <div id="slider"> 
 
     </div> 
 
     <p><span></span> 
 
     </p> 
 
    </div> 
 
    </div> 
 

 
</body>

來源

2016-08-27 Tomsz Comasz

請分享您的代碼！ – Ehsan

我用代碼添加了reposytorium的鏈接。如果我不得不在這裏放置代碼，那將是800行代碼！ –

你的CSS有.img { top: 2200px }這將使所有圖像從頂部2200個像素×。這就是頁面高度巨大的原因。

來源

2016-08-28 10:15:00

它在我的完整項目中工作，修復它。 –

如果這回答了您的問題，請單擊答案旁邊的複選圖標。 –

滑塊圖片放大站點高度

回答

相關問題