響應式設計：使用百分比滾動JS/JQuery旋轉橫幅（非px）

我快到了。但是，有一個我無法解決的錯誤。我認爲問題在於使用百分比而不是像素（因爲我希望橫幅調整爲不同的屏幕寬度）。響應式設計：使用百分比滾動JS/JQuery旋轉橫幅（非px）

橫幅每5秒鐘滾動一次，但只能在返回到開始之前進入第3張圖像。另外 - 當我調整窗口的大小時，橫幅只在前兩張圖像之間旋轉（有時滾動到不存在的第五張圖像，顯示空白）。

我玩過的Javascript。將IF語句更改爲< -400％（仍然旋轉3張圖像）。當我將它設置爲< -800％時，它會顯示2張圖片，而< -1000％則永遠不會返回到開頭！我很困惑，但也許我錯過了一些明顯的東西。

HTML：

<div id="wrapper"> 

    <div id="subwrapper3"> 

     <div class="bannerwrapmain"> 
      <img src="/images/banner-image-1.jpg" /> 
     </div> 

     <div class="bannerwrapmain"> 
      <img src="/images/banner-image-2.jpg" /> 
     </div> 

     <div class="bannerwrapmain"> 
      <img src="/images/banner-image-3.jpg" /> 
     </div>  

     <div class="bannerwrapmain"> 
      <img src="/images/banner-image-4.jpg" /> 
     </div> 

    </div> 

</div>

CSS：

#wrapper 
{ 
    width:100%; 
    overflow:hidden; 
    margin:0px 0px 0px 0px; 
    padding:0px; 
} 

#subwrapper3 
{ 
    width:400%; 
    overflow:hidden; 
    margin: 0px; 
    padding:0px; 
} 

.bannerwrapmain 
{ 
    display: block; 
    width:25%; 
    margin:0px; 
    padding:0px; 
    float:left; 
} 

.bannerwrapmain img 
{ 
    width:100%; 
    margin:0px; 
    padding:0px; 
    height:auto; 
    border:none; 
}

JAVASCRIPT：

window.setInterval(function(){ 

if ($("#subwrapper3").css("marginLeft") < "-300%") { 
    $("#subwrapper3").animate({ marginLeft: '0%' }); 
} else { 
    $("#subwrapper3").animate({ marginLeft: '-=100%' });   
} 

}, 5000);

來源

2013-01-11 SEOSammo

你檢查了什麼'.css（「marginLeft」）'回饋？你在這裏用一個字符串競賽。與比較「a」>「b」相同嗎？ –

試試你的主包裝設置爲一個固定的尺寸，說1000像素。那麼你的subwrapper爲100％，而你的圖片爲max-width：100％;

#wrapper{width:1000px;} 
#subwrapper3, .bannerwrapmain{width:100%;} 
.bannerwrapmain img{max-width:100%;}

然後，您可以使用媒體查詢根據屏幕大小來改變主包裝寬度，包含的元素將與它規模：

@media screen and (max-width:500px){  
    #wrapper{width:500px;} 
}

我創建了一個內容滑塊在幾個月前，它可能對你有一些幫助... http://codepen.io/lukeocom/pen/mHyBv

來源

2013-04-30 00:55:12 lukeocom

響應式設計：使用百分比滾動JS/JQuery旋轉橫幅（非px）

回答

相關問題