css在图片上添加轮播

CSS可以让我们更加丰富的设计图片的展示效果，比如可以给图片添加轮播功能，让网页更加动态，下面我们来看看如何实现。

div class="gallery">
    img src="img1.jpg">
    img src="img2.jpg">
    img src="img3.jpg">
    img src="img4.jpg">
    /div>

首先我们需要一个容器，然后在容器内放置要展示的图片，注意要确保图片的父元素是block元素。

.gallery {
    width: 600px;
    height: 400px;
    overflow: hidden;
    position: relative;
}
.gallery img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s;
}
.gallery img:first-child {
    opacity: 1;
}

接下来我们需要对容器和图片做一些CSS样式上的处理，比如设置容器的宽高和溢出隐藏，让图片始终在容器内部展示。同时，我们设置图片的样式为绝对定位，让图片展示在容器的最顶层。

然后利用CSS3的transition属性实现图片的渐变效果，当我们鼠标想要滑动较快的时候，可以设置transition-time，让图片在滑动的同时也变得平滑。

.gallery img.active {
    opacity: 1;
    z-index: 1;
}
    

我们可以为图片添加一个active类，当图片为激活状态时，我们可以改变它的透明度和z-index的值，让其更加突出。

script>
    let active = 0;
    let images = document.querySelectorAll(".gallery img");
setInterval(function() {
    images[active].classList.remove("active");
    active = (active + 1) % images.length;
    images[active].classList.add("active");
}
    , 5000);
    /script>
    

最后，我们需要添加JavaScript代码实现轮播的逻辑。在代码中，我们使用setInterval()函数，每隔5秒钟来循环图片，并将目前的激活图片的active类删除，同时将下一张图片的active类添加，并更新目前图片的序号。这样就完成了一个简单的CSS图片轮播了。

这里值得注意的是，CSS实现图片轮播只能实现简单的轮播效果，如果我们想要更加丰富、高级的效果，比如图片缩放、旋转等，我们需要使用JavaScript来掌控图片。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！