<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