我一直试图用css或javascript制作幻灯片,但没有运气,我需要每2秒钟在2张图片上播放幻灯片。下面是我的html代码,我希望我的幻灯片显示在events-img类。 提前谢谢。
<div class="second-section">
<div class="row">
<div class="col-md-3 col-sm-12 events-img">
<img src="img/apple-gs-os.png">
<img src="img/f5.jpg">
</div>
<div class="col-md-2 pen">
<img src="img/pen.png">
</div>
<div class="col-md-7 col-sm-12 events-info">
<div class="col-md-12 logo-wrap">
<img src="img/digitLogo.png" class="events-info-logo">
</div>
<div class="col-md-12 events-info-text">
<p>
lorem ipsum
</p>
<button type="button" class="btn btn-info">More Info</button>
</div>
</div>
</div>
<div class="row square">
<div class="col-md-12 squares">
<p>
Lorem ipsum
</p>
</div>
<img src="img/123.png">
</div>
</div>
var slideIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("events-img");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}