<body>

<div id="parent_scroll">
    <div id="slider">
        <div class="slides">Slide1</div>
        <div class="slides">Slide2</div>
        <div class="slides">Slide3</div>
    </div>
</div>

</body>



<style>
    #parent_scroll{
        width: 800px;
        height: 350px;
        border: 1px solid grey;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
        position: relative;
    }
#slider{
    width: 2430px;
    border: 1px solid green;
    height: 350px;
    position: absolute;
}

.slides{
    width: 800px;
    height: 350px;
    border: 1px dotted blue;
    float: left;
    background-color: grey;
    font-size: 30px;
    text-align: center;
}




我正在尝试实现某种功能的幻灯片放映。但是我不确定这里的javascript逻辑是什么,我知道我需要使用setInterval()函数。唯一的部分是我如何计算id为“ slider”的元素的宽度。指针会有所帮助
编辑:试图实现此而无需jQuery

最佳答案

我在CSS中看到宽度是静态的,但是如果要添加幻灯片,则应该
使用.slides的宽度乘以幻灯片数量计算#slider宽度。

然后,将您的.slides宽度(包括边距)保存为偏移量,并使用偏移量为#slider的左侧位置设置动画。

编辑:实际上,我一直在摆弄另一种技术,因此您不必计算宽度,并且使用了显示内联块,如下所示:

#slider { white-space:nowrap;}
.slides { display:inline-block;}


这样会自动将所有幻灯片放到同一行,然后可以使用边距进行动画处理。

让我知道是否可以解决您的问题。您是否需要代码示例?

编辑:示例(使用CSS动画)

Java脚本

var slider, slides, offset, amount, _timer, _curindex = 0;

function initSlider() {
    slider = document.getElementById("slider");
    slides = document.getElementsByClassName("slides");

    offset = slides[0].offsetWidth+2;
    amount = slides.length;

    slider.style.width = offset*amount;

    _timer = setInterval(moveSlide, 3000);
}

function moveSlide() {
    _curindex = (_curindex == amount-1) ? 0 : _curindex+1;
    slider.style.left = -_curindex*offset+"px";
}
initSlider();


FIDDLE

10-05 20:27
查看更多