Question

 <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：＆＃34; slider＆＃34;计算出元素的宽度。指针会有所帮助编辑：尝试在没有jQuery的情况下实现此功能

Answer 1

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

然后，将.slides宽度（包括边距）保存为偏移量，并使用偏移量为#slip＆＃39s的左侧位置设置动画..

编辑：实际上，还有其他技术我一直在努力，所以你不必计算宽度，并且使用显示器像这样的内联块：

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

这将自动将所有幻灯片放在同一行上，然后您可以使用边距进行动画处理。

如果能为您清除它，请告诉我..您需要一个代码示例吗？

编辑：示例（使用css动画）

的Javascript

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

Answer 2

你应该试试这段代码

<div id="div1" class="slides" style="width:800px...">Slide1</div>`

和js代码

var slide1 = document.getElementById("div1");
//if you want to add width
slide1.style.width= parseInt(slide1.style.width) + 100 + "px";`

Answer 3

喜欢这个？纯HTML CSS：

<div id="parent_scroll">
    <div id="slider">
        <div class="slides"><img src="http://placehold.it/350x150/ff0000/000000" alt=""></div>
        <div class="slides"><img src="http://placehold.it/350x150/00ff00/000000" alt=""></div>
        <div class="slides"><img src="http://placehold.it/350x150/0000ff/000000" alt=""></div>
    </div>
</div>

DIV#parent_scroll{
    width: 350px;
    height: 150px;
    overflow: hidden;
}

DIV#slider{
    position: relative;
    width: 1050px;
    animation: slideme 5s infinite;
    -webkit-animation: slideme 5s infinite;
}

@keyframes slideme {
    0%   {left: 0;}
    33%  {left: -350px;}
    67%  {left: -700px;}
    100% {left: 0;}
} 
@-webkit-keyframes slideme {
    0%   {left: 0;}
    33%  {left: -350px;}
    67%  {left: -700px;}
    100% {left: 0;}
} 

DIV.slides{
    float: left;
}

DIV#slider:before, DIV#slider:after{
    display: table;
    content: "";
}
DIV#slider:after{
    clear: both;
}
DIV#slider{
    zoom: 1
}

http://jsfiddle.net/yLTKe/3/

添加JS以使其动态化

图像滑块：使用宽度

3 个答案:

的Javascript