html动态实现图片轮播代码

HTML动态实现图片轮播是网页设计中非常常用的一种效果，可以使页面更加美观生动，给用户带来更好的视觉体验。下面介绍一种使用HTML实现动态图片轮播的方法。

代码如下：
<html>
<head>
<title>图片轮播</title>
<style>
    .slideshow {
        position: relative;
        width: 100%;
        height: 400px;
        overflow: hidden;
    }
    .slideshow img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 1s;
        z-index: -1;
    }
    .slideshow img.active {
        opacity: 1;
        z-index: 1;
    }
</style>
</head>
<body>
<div class="slideshow">
    <img src="img1.jpg" alt="图片1" class="active">
    <img src="img2.jpg" alt="图片2">
    <img src="img3.jpg" alt="图片3">
</div>
<script>
    var slideIndex = 0;
    var slides = document.getElementsByClassName("slideshow")[0].getElementsByTagName("img");
    setInterval(function() {
        slides[slideIndex].classList.remove("active");
        slideIndex++;
        if (slideIndex >= slides.length) {
            slideIndex = 0;
        }
        slides[slideIndex].classList.add("active");
    },5000);
</script>
</body>
</html>

html动态实现图片轮播代码

以上代码中，首先定义了一个名为“slideshow”的div，并设置其css属性position为relative，为了保证其中的图片可以绝对定位，overflow为hidden，保证超出部分不显示。然后设置每张图片的css属性为absolute，保证可以绝对定位，left和top都为0，保证和“slideshow”div的左上角完全重合。opacity为0，保证不显示，z-index为-1，保证在其他元素下面。

在img的class中设置一个名为“active”的class，用来标记当前应该显示的图片，其opacity为1，z-index为1，保证在其他元素上面。

在最后的script标签中，定义一个slideIndex变量，用来记录当前显示的图片的索引。slides变量用来获取所有的img标签。使用setInterval函数，每5000毫秒切换一次图片，将当前active的类删除，将slideIndex加1，判断是否已到最后一张图片，如果是就重新从第一张开始，将新的图片加上active类，实现动态图片轮播效果。

html动态实现图片轮播代码

相关推荐