首页帮我写一个js轮播图

帮我写一个js轮播图

时间: 2024-10-24 09:10:03 浏览: 11

当然可以，创建一个简单的JavaScript轮播图，通常我们会使用HTML、CSS和JavaScript结合来实现。以下是一个基本的示例，使用了纯JavaScript和HTML： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .slider { width: 600px; height: 400px; position: relative; overflow: hidden; } .slider ul { list-style-type: none; margin: 0; padding: 0; position: absolute; left: 0; top: 0; } .slider li { display: none; } .slider li.active { display: block; } </style> </head> <body> <div class="slider"> <ul id="carousel"> <li><img src="image1.jpg" alt="图片1"></li> <li><img src="image2.jpg" alt="图片2"></li> <li><img src="image3.jpg" alt="图片3"></li> </ul> <a class="prev" onclick="prevSlide()">«</a> <a class="next" onclick="nextSlide()">»</a> </div> <script> var current = 0; var slideIndex = document.getElementById('carousel'); function showSlide(n) { var i; var slides = slideIndex.getElementsByTagName('li'); if (n > slides.length - 1 || n < 0) { return; } for (i = 0; i < slides.length; i++) { slides[i].classList.remove('active'); } slides[n].classList.add('active'); } function nextSlide() { current++; if (current >= slideIndex.children.length) { current = 0; } showSlide(current); } function prevSlide() { current--; if (current < 0) { current = slideIndex.children.length - 1; } showSlide(current); } // 初始加载第一张图片 showSlide(0); </script> </body> </html> ``` 这个例子中，我们有一个包含三个图片的轮播图容器，每张图片都是`<li>`元素的子元素。`showSlide()`函数用于切换图片，`prevSlide()`和`nextSlide()`分别用于上一张和下一张操作。点击左右箭头会触发相应的事件。

阅读全文