我有一个愚蠢而简单的问题,但我是JS的初学者。我想创建一个水平滑块。目前,JS代码如下所示:
var slideIndex = 0;
slider();
function slider() {
var i;
var x = document.getElementsByClassName("part");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "inline";
setTimeout(slider, 3000);
}
我知道我应该使用marginLeft属性使图像从左到右显示,但我不知道如何在代码中使用此属性。任何帮助/暗示都会非常感激!
HTML code:
<div class="container">
<section class="content">
<div id="img1" class="slide">
<h2>...</h2>
<p>....</p>
</div>
<div id="img2" class="slide">
<h2>....</h2>
<p>....</p>
</div>
</section>
</div>
答案 0 :(得分:2)
也许你可以添加一个“slideOut”动画类
var slideIndex = 0;
slider();
function slider() {
var i;
var x = document.getElementsByClassName("part");
for (i = 0; i < x.length; i++) {
x[i].classList.remove("slide");
x[i].classList.remove("slideOut");
x[i].className += " slideOut";
}
slideIndex++;
if (slideIndex > x.length) {
slideIndex = 1
}
x[slideIndex - 1].classList.remove("slideOut");
x[slideIndex - 1].style.display = "inline";
x[slideIndex - 1].className += " slide";
setTimeout(slider, 1500);
}
.content {
position: relative;
width: 100px;
height: 100px;
overflow: auto;
}
.row {
margin: 0 auto;
width: 50%;
}
.slide {
position: absolute;
left: -100px;
width: 100px;
height: 100px;
-webkit-animation: slide 0.5s forwards;
-webkit-animation-delay: 0.5s;
animation: slide 0.5s forwards;
animation-delay: 0.5s;
}
@-webkit-keyframes slide {
100% {
left: 0;
}
}
@keyframes slide {
100% {
left: 0;
}
}
.slideOut {
position: absolute;
left: 0px;
width: 100px;
height: 100px;
-webkit-animation: slideOut 0.5s forwards;
-webkit-animation-delay: 0.5s;
animation: slideOut 0.5s forwards;
animation-delay: 0.5s;
}
@-webkit-keyframes slideOut {
100% {
left: 100px;
}
}
@keyframes slideOut {
100% {
left: 100px;
}
}
#img1 {
background: red;
text-align: center
}
#img2 {
background: blue;
text-align: center
}
#img3 {
background: greenyellow;
text-align: center
}
#img4 {
background: orangered;
text-align: center
}
<div class="row">
<section class="content">
<div id="img1" class="part"><img src="" alt="">
<h3>1</h3></div>
<div id="img2" class="part"><img src="" alt="">
<h3>2</h3></div>
<div id="img3" class="part"><img src="" alt="">
<h3>3</h3></div>
<div id="img4" class="part"><img src="" alt="">
<h3>4</h3></div>
</section>
</div>