滑块没有正确渲染

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