幻灯片放映2张图片,css / javascript

时间:2016-12-01 19:48:06

标签: html css

我一直试图用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
}

0 个答案:

没有答案
相关问题