Javascript 制作我自己的滑块

我正在制作一个滑块，有一些问题

1） 在第一张幻灯片上，动画不会设置动画

2） 最后一个长方体的间距在滑块中为关闭状态，但随着滑块的移动，它会进行修正

3） 有时动画会有一些口吃

我把它放在一个代码笔里：

任何建议都将不胜感激。我不确定为什么会出现这些问题。我正在为动画使用css转换，并使用javascript/jquery更改css/dom/calcs

代码

html，正文{
保证金：0；
背景色：#888；
身高：100%；
宽度：100%；
框大小：边框框；
}
#滑块{
宽度：100%；
身高：100%；
显示：块；
位置：相对位置；
过渡时间：0.5s；
过渡定时功能：易进易出；
}
#滑块ul{
填充：0；
保证金：自动；
显示：块；
最高：50%；
位置：相对位置；
转化：translateY（-50%）；
空白：nowrap；
}
#李滑块{
显示：内联块；
高度：150像素；
宽度：150px；
利润率：10px；
}
.sliderContainer{
宽度：60%；
高度：200px；
溢出：隐藏；
背景色：白色；
最高：50%；
左：50%；
转化：translateX（-50%）translateY（-50%）；
位置：相对位置；
}

a
b
c
d
e
f

$（文档）.on（“就绪”，函数（）{
变量滑块=$（“#滑块”），
sliderWidth=slider.outerWidth（真），
img=滑块。查找（“li”），
imgWidth=img.外径（真），
imgCount=img.长度，
imgSize=滑块宽度/imgCount，
imgHorMargin=parseFloat（img.css（“左边距”）+parseFloat（img.css（“右边距”）），
imgVerMargin=parseFloat（img.css（“页边距底部”）+parseFloat（img.css（“页边距顶部”），
imgSizeX=（imgSize imgHorMargin），
imgSizeY=（imgSize imgVerMargin）；
slider.find（“li”）.css（{“宽度”：imgSizeX，“高度”：imgSizeY}）；
（函数slideActivate（）{
setTimeout（函数循环（）{
css（“过渡持续时间”，“0.5s”）；
css（“左”，-imgSize）；
setTimeout（函数（）{
控制台日志（“超时2”）；
firstImage=slider.find（“li”）[0]；
firstImage.remove（）；
css（“转换持续时间”，“0s”）；
css（“左”，“0px”）；
setTimeout（函数（）{
控制台日志（“超时3”）；
slider.find（“ul”）.append（firstImage）；
requestAnimationFrame（slideActivate）；
}, 100);
}, 500);
}, 2000);
})();
});

结果表明，边距问题是由于元素是内联块而对浏览器渲染空间造成的。浏览器添加不可编辑的间距

我找到的最佳解决方案是将ul的父级设置为字体大小：0

---

第二个问题是第一张幻灯片没有设置动画，这是因为我没有设置初始css左值来设置动画。

浏览器不会添加不可编辑的间距。是的。删除标签之间的空白，问题就会消失。我认为让浏览器在一个标签的结尾和下一个标签的开头之间呈现空白是一个设计错误。当我说“不可编辑”时，我的意思是，我不能像设置css值那样设置值。

<style type="text/css">
    html,body {
        margin: 0;
        background-color: #888;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    #slider {
        width: 100%;
        height: 100%;
        display: block;
        position: relative;
        transition-duration: 0.5s;
        transition-timing-function: ease-in-out;
    }

    #slider ul {
        padding: 0;
        margin: auto;
        display: block;
        top: 50%;
        position: relative;
        transform: translateY(-50%);
        white-space: nowrap;
    }

    #slider li {
        display: inline-block;
        height: 150px;
        width: 150px;
        margin: 10px;
    }

    .sliderContainer {
        width: 60%;
        height: 200px;
        overflow: hidden;
        background-color: white;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        position: relative;
    }

</style>

    <div class="sliderContainer">
        <div id="slider">
            <ul>
                <li style="background-color: red">a</li>
                <li style="background-color: green">b</li>
                <li style="background-color: blue">c</li>
                <li style="background-color: orange">d</li>
                <li style="background-color: purple">e</li>
                <li style="background-color: yellow">f</li>
            </ul>
        </div>
    </div>

<script type="text/javascript">

$(document).on("ready", function(){

    var slider = $("#slider"),
        sliderWidth = slider.outerWidth(true),
        img = slider.find("li"),
        imgWidth = img.outerWidth(true),
        imgCount = img.length,
        imgSize = sliderWidth/imgCount,
        imgHorMargin = parseFloat(img.css("margin-left")) + parseFloat(img.css("margin-right")),
        imgVerMargin = parseFloat(img.css("margin-bottom")) + parseFloat(img.css("margin-top")),
        imgSizeX = (imgSize-imgHorMargin),
        imgSizeY = (imgSize-imgVerMargin);

    slider.find("li").css({"width": imgSizeX, "height": imgSizeY});


    (function slideActivate(){
        setTimeout(function loop(){
            slider.css("transition-duration", "0.5s");
            slider.css("left",-imgSize);
            setTimeout(function(){
                console.log("timeout2");
                firstImage = slider.find("li")[0];
                firstImage.remove();
                slider.css("transition-duration", "0s");
                slider.css("left", "0px");
                setTimeout(function(){
                    console.log("timeout3");
                    slider.find("ul").append(firstImage);
                    requestAnimationFrame(slideActivate);
                }, 100);
            }, 500);
        }, 2000);
    })();

});

</script>