javascript实现图片滑动轮播_代码示例

温馨提示：这篇文章已超过289天没有更新，请注意相关的内容是否还可用！

1、图片滑动轮播是一种常见的网页设计效果，通过JavaScript可以实现这一功能。我们需要一个包含多张图片的容器，然后通过改变容器的位置来实现图片的滑动。在实现过程中，我们可以使用定时器来控制图片的滑动速度和间隔时间。

示例代码如下：


<!DOCTYPE html>
<html>
<head>
<style>
    .slider-container {
        width: 500px;
        height: 300px;
        overflow: hidden;
        position: relative;
    }
    .slider {
        width: 500%;
        height: 300px;
        position: absolute;
        left: 0;
        top: 0;
    }
    .slider img {
        width: 20%;
        height: 300px;
        float: left;
    }
</style>
</head>
<body>
    <div class="ccb7-662e-8451-8160 slider-container">
        <div class="662e-8451-8160-bf4c slider">
            <img src="image1.jpg">
            <img src="image2.jpg">
            <img src="image3.jpg">
            <img src="image4.jpg">
            <img src="image5.jpg">
        </div>
    </div>
    <script>
        // 获取容器和图片元素
        var container = document.querySelector('.slider-container');
        var slider = document.querySelector('.slider');
        var images = document.querySelectorAll('.slider img');
        // 设置容器的宽度
        container.style.width = (images.length * 100) + '%';
        // 设置每张图片的宽度
        Array.from(images).forEach(function(image) {
            image.style.width = (100 / images.length) + '%';
        });
        // 定义滑动函数
        function slide() {
            var currentLeft = parseInt(slider.style.left) || 0;
            var newLeft = currentLeft - 100;
            // 判断是否到达最后一张图片，如果是则回到第一张
            if (newLeft < -(images.length - 1) * 100) {
                newLeft = 0;
            }
            slider.style.left = newLeft + '%';
        }
        // 设置定时器，每隔3秒滑动一次
        setInterval(slide, 3000);
    </script>
</body>
</html>

以上代码中，我们首先定义了一个容器 `slider-container`，并在其中放置了多张图片。然后通过设置容器的宽度和每张图片的宽度，使得图片可以横向排列在容器中。接着，定义了一个滑动函数 `slide`，通过改变容器的 `left` 属性来实现图片的滑动效果。使用 `setInterval` 函数设置定时器，每隔3秒调用一次滑动函数，实现自动滑动的效果。

javascript实现图片滑动轮播_代码示例

相关阅读