首页js代码生成简易轮播图

js代码生成简易轮播图

时间: 2023-12-23 07:39:36 浏览: 68

以下是一个简单的 JavaScript 代码示例，可以生成一个基本的轮播图： ```html <!DOCTYPE html> <html> <head> <style> .swiper-container { width: 500px; height: 300px; overflow: hidden; position: relative; } .swiper-item { width: 500px; height: 300px; position: absolute; transition: left 0.5s; } </style> </head> <body> <div class="swiper-container"> <div class="swiper-item"> <img src="image1.jpg" alt="Image 1"> </div> <div class="swiper-item"> <img src="image2.jpg" alt="Image 2"> </div> <div class="swiper-item"> <img src="image3.jpg" alt="Image 3"> </div> </div> <script> window.onload = function() { var container = document.querySelector('.swiper-container'); var items = document.querySelectorAll('.swiper-item'); var currentIndex = 0; setInterval(function() { currentIndex = (currentIndex + 1) % items.length; container.style.left = -currentIndex * 500 + 'px'; }, 2000); }; </script> </body> </html> ``` 在上述代码中，我们创建了一个宽度为 500px，高度为 300px 的轮播图容器。每个轮播项（图片）都是宽度和高度相同的绝对定位元素。通过设置容器元素的 left 值来切换轮播项的显示。定时器每 2 秒切换到下一张轮播项。当切换到最后一张轮播项时，容器元素的 left 值会设置为 0，实现了无限循环的效果。你可以根据需要自定义样式和轮播项的内容。记得将 `<img>` 标签中的图片路径替换为你自己的图片路径。

阅读全文