JavaScript实现图片自动切换

JavaScript实现图片自动切换

1、 HTML

 <div class="slider_box">
        <ul>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.jpg" alt=""></li>
            <li><img src="images/4.jpg" alt=""></li>
        </ul>
    </div>

2、css

* {
    margin: 0;
    padding: 0;
}

.slider_box {
    width: 600px;
    height: 300px;
    overflow: hidden;
    margin: 100px auto;
    position: relative;
}

.slider_box ul {
    display: flex;
    width: 1800px;
    position: absolute;
    left: 0;
}

.slider_box ul li {
    list-style: none;
    width: 600px;
    height: 300px;
    overflow: hidden;
}

.slider_box ul li img {
    width: 100%;
}

3、JavaScript

var slider_ul = document.querySelector(".slider_box>ul");
slider_ul.style.left = 0;

function change() {
    var newOffset = parseInt(slider_ul.style.left) - 600;
    if (newOffset < -1200) {
        slider_ul.style.left = "0px"
    } else {
        slider_ul.style.left = newOffset + "px"
    }

}
setInterval(change, 2000);

4、 三张图片轮流切换