原生js和css实现图片轮播效果

实现图片轮播效果，需要涉及到以下几个步骤：

1. 设置容器和图片的布局样式；
2. 编写js代码控制图片轮播；
3. 配置定时器实现轮播自动播放；
4. 编写css代码实现图片的过渡效果。

下面，我们就来详细讲解如何用原生js和css实现图片轮播效果。

1. 设置容器和图片的布局样式

首先，需要在HTML页面上设置一个容器，容器内包含多张图片，如下所示：

<div class="slider">
    <img src="image1.jpg" alt="">
    <img src="image2.jpg" alt="">
    <img src="image3.jpg" alt="">
    <img src="image4.jpg" alt="">
    <img src="image5.jpg" alt="">
</div>

然后，在CSS样式表中设置容器的样式：

.slider {
    position: relative;
    width: 500px;
    height: 300px;
    overflow: hidden;
}

其中，position: relative;表示设置容器为相对定位，让容器内的图片可以根据容器的位置进行移动；width: 500px;和height: 300px;分别表示容器的宽度和高度；overflow: hidden;表示隐藏容器内的溢出部分，这样可以使得图片轮播时只显示一个图片。

接着，在CSS样式表中设置图片的样式：

.slider img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    transition: all 1s ease-in-out;
}

其中，position: absolute;表示设置图片为绝对定位；top: 0;和left: 0;表示设置图片的位置为容器的左上角；width: 100%;和height: 100%;表示设置图片的宽度和高度为容器的宽度和高度，从而使得图片可以填满整个容器；opacity: 0;表示设置图片的透明度为0，让图片被隐藏；z-index: 1;表示设置图片的层级为1，即在轮播过程中会被覆盖；transition: all 1s ease-in-out;表示设置图片的过渡效果，这里是使得图片1s内逐渐显示或隐藏。

2. 编写js代码控制图片轮播

在HTML页面底部引入一段js代码，用来控制图片的轮播：

<script>
    var sliderIndex = 1; // 图片的索引值
    var sliderTimer = null; // 定时器

    // 获取所有图片
    var sliderImg = document.querySelectorAll('.slider img');

    // 显示第一张图片
    sliderImg[0].style.opacity = 1;

    // 执行自动轮播
    sliderTimer = setInterval(function() {
        sliderIndex++;
        if (sliderIndex > sliderImg.length) {
            sliderIndex = 1;
        }
        slide(sliderIndex);
    }, 3000);

    // 图片轮播函数
    function slide(index) {
        for (var i = 0; i < sliderImg.length; i++) {
            sliderImg[i].style.opacity = 0;
        }
        sliderImg[index - 1].style.opacity = 1;
    }
</script>

这段代码的逻辑如下：

1. 设置sliderIndex变量，用来记录当前显示的图片的索引值；
2. 设置sliderTimer变量，用来记录定时器ID；
3. 使用document.querySelectorAll()方法获取所有的图片；
4. 设置第一张图片的透明度为1，即显示第一张图片；
5. 使用setInterval()方法设置定时器，每隔3秒切换一次图片；
6. 当切换到最后一张图片时，将sliderIndex重置为1；
7. 调用slide()函数执行图片轮播过程；
8. 在slide()函数中，使用for循环将所有的图片的透明度设置为0，然后再将要显示的图片的透明度设置为1。

3. 配置定时器实现轮播自动播放

在上面的js代码中，我们使用了setInterval()方法来实现图片的自动切换。这个方法接收两个参数：

• 第一个参数是一个回调函数，表示定时器到期时要执行的代码；
• 第二个参数是定时器的时间间隔，即每隔多少毫秒执行一次回调函数。

在上面的代码中，我们将时间间隔设置为3000毫秒，即3秒。

4. 编写css代码实现图片的过渡效果

在CSS样式表中，我们为每一张图片都设置了过渡效果，这样可以让图片在切换时呈现出一种渐变的效果，使得轮播更加平滑。我们使用的是transition属性，它可以控制元素的过渡效果。

具体来说，我们将transition设置为all 1s ease-in-out，其中：

• all表示对所有CSS属性都进行过渡效果；
• 1s表示过渡效果的时间为1秒；
• ease-in-out表示过渡效果采用缓动函数，在开始和结束时速度较慢，在中间时速度较快。

示例1：使用原生JS和CSS实现简单的图片轮播效果
可参考：https://www.jianshu.com/p/14f4f6a5d9ab
在此示例中，我们创建一个名为“slider”的容器，并在其中添加了一组图片。然后，我们使用原生JS和CSS来控制图片的显示和隐藏，从而实现了一个简单的图片轮播效果。

示例2：使用原生JS和CSS实现简单的垂直滚动效果
可参考：https://www.cnblogs.com/myjik/p/5966250.html
这个示例也是使用原生JS和CSS来实现垂直滚动效果，不同的是，它是在一个固定高度的容器内进行滚动，而不是轮播图片。我们通过JS来动态改变容器的top值，从而实现了图片的垂直滚动。