自动切换轮播图而且图片会放大

最新推荐文章于 2023-11-21 15:18:55 发布

cv大湿

最新推荐文章于 2023-11-21 15:18:55 发布

阅读量558

点赞数

文章标签： html5 javascript css 前端 css3 jquery

本文链接：https://blog.csdn.net/m0_64489075/article/details/132904485

版权

使用了jQuery和CSS3的动画效果来实现图片的切换和放大：

HTML代码：

<div id="slideshow">
    <img src="image1.jpg" alt="">
    <img src="image2.jpg" alt="">
    <img src="image3.jpg" alt="">
</div>

css代码:

#slideshow {
    position: relative;
    overflow: hidden;
    width: 400px;
    height: 300px;
}

#slideshow img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    transform: scale(1);
}

#slideshow img.active {
  opacity: 1;
  animation-name: zoom-in;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  transition: all 2s ease;
}
@keyframes zoom-in {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

js代码:

$(document).ready(function() {
    var images = $('#slideshow img');
    var currentIndex = 0;

    function fadeImage() {
        // 淡出当前图片
        $(images[currentIndex]).removeClass('active');

        // 淡入下一张图片
        currentIndex = (currentIndex + 1) % images.length;
        $(images[currentIndex]).addClass('active');
    }

    setInterval(fadeImage, 3000); // 每3秒切换一张图片
});

通过设置CSS样式来定义轮播图容器的大小和图片的位置。JavaScript代码中，将所有图片元素存储在一个数组中，并使用fadeImage函数来实现图片的切换和放大效果，通过setInterval方法定时调用fadeImage函数，实现图片自动切换的效果。

注意：以上代码中使用了jQuery库来简化DOM操作和动画效果的实现，所以在使用前需要引入jQuery库。