滑塊沒有正確渲染

Question

我只想做一個基於margin-left css屬性的簡單滑塊，但它看起來不會在部分margin-left增量之間渲染結果。我的代碼有什麼問題？

https://jsfiddle.net/1utkr6et/

HTML：

<div class="main-padding"> 
    <div id="wrapper-slider"> 
     <div class="item-slider item-slider1"></div> 
     <div class="item-slider item-slider2"></div> 
     <div class="item-slider item-slider3"></div> 
    </div> 
</div> 

CSS：

* { 
    border: 0; 
    margin: 0; 
    padding: 0; 
    outline: 0; 
} 

a { 
    text-decoration: none; 
    color: inherit; 
} 

body { 
    font-size: 62.5%; 
} 

ul, ol { 
    list-style-type: none; 
} 

.main-padding { 
    padding: 20px; 
} 


#wrapper-slider { 
    height: 200px; 
    position: relative; 
    overflow: hidden; 
} 

.item-slider { 
    width: 100%; 
    float: left; 
    height: 100%; 
} 

.item-slider1 { 
    background-color: red; 
} 

.item-slider2 { 
    background-color: blue; 
} 

.item-slider3 { 
    background-color: yellow; 
} 

JS（jquery的）：

$(function() { 

    var item = ".item-slider"; 
    var next = 1; 
    setInterval(function() { 
     $(item + next).animate({"marginLeft": "-100%"}, 1000); 
     next++; 
    }, 2000); 

}); 

Answer 1

您的滑塊的主要問題是您正在定義滑塊float的元素。我在代碼中進行了一些更改，以使其正常工作。

CSS：

.item-slider { 
    position: absolute; 
    left: 100%; 
    width: 100%; 
    height: 100%; 
} 

的JavaScript：

$(function() { 

    var item = ".item-slider"; 
    var next = 1; 
    var current; 
    setInterval(function() { 
     if(next === 1){ 
      prev = $(item + 3); 
     }else{ 
      prev = $(item + (next - 1)); 
     } 
     current = $(item + next); 
     current.css({"left": "100%"}); 
     current.animate({"left": "0"}, 1000); 
     prev.animate({"left": "-100%"}, 1000); 
     if(next === 3){ 
      next = 1; 
     }else{ 
      next++; 
     } 
    }, 2000); 

}); 

FIDDLE：https://jsfiddle.net/lmgonzalves/1utkr6et/5/

Answer 2

你需要指定包裝滑塊如用於width:300%; 100％的寬度每個sl IDE。然而paddingmain-padding使幻燈片因爲他們是彼此相鄰，所以你可以看到下一張幻燈片約20px的難點。除非有更好的方法，否則我建議不要使用填充，因爲我在Demo中使用了填充。

您還需要計算每個幻燈片的寬度。

演示

https://jsfiddle.net/twgvxj1z/

代碼

var tt = $(window).width(); 
$(".item-slider").css("width", tt+"px");