Question

我正在制作滑块并遇到一些问题。

1）在第一张幻灯片上，动画没有动画效果。

2）最后一个方框的间距在开始时关闭，但随着滑块的进行，它会更正。

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

我把它放在这里的代码中：

非常感谢任何建议。我不确定为什么会出现这些问题。我正在使用css过渡动画和javascript / jquery来改变css / dom / calcs。

CODE

<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>

Answer 1

事实证明，边缘问题是对浏览器渲染空间的影响，因为元素是内联块。浏览器添加不可编辑的间距。

我找到的最佳解决方案是使ul的父级具有font-size：0。

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

制作我自己的滑块

1 个答案: