图像滑块:处理宽度

Image Slider: Working with the widths

本文关键字：处理 图像      更新时间：2023-09-26
 <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的左侧位置使用偏移量…

EDIT:实际上，我一直在摆弄另一种技术，这样你就不必计算宽度了，那就是像这样使用display inline-block:

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

这将自动使所有的幻灯片在同一行，然后你可以使用动画空白。

让我知道你是否明白了…您需要代码示例吗?

EDIT:示例(使用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();

小提琴

像这样?纯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使其动态

你应该试试下面的代码

<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";`
相关文章：