首页帮我写一个炫酷的动态web页面

帮我写一个炫酷的动态web页面

时间: 2024-10-13 07:14:24 浏览: 24

创建一个炫酷的动态Web页面通常需要HTML、CSS和JavaScript的配合。下面是一个简单的例子，展示如何利用现代前端技术制作一个交互式的轮播图： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>炫酷动态轮播</title> <link rel="stylesheet" href="styles.css">  </head> <body> <div class="carousel-container"> <ul class="slides"> <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 src="scripts.js"></script>  </body> </html> ``` ```css .carousel-container { width: 100%; position: relative; } .slides { display: flex; width: 100%; transition: transform 0.5s ease; } .slide { flex: 1; } .prev, .next { position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; } ``` ```javascript function prevSlide() { var slides = document.querySelectorAll('.slide'); slides.forEach((slide, index) => { if (index === 0) { slide.style.transform = 'translateX(100%)'; } else { slide.style.transform = 'translateX(-' + ((index - 1) * 100) + '%)'; } }); } function nextSlide() { var slides = document.querySelectorAll('.slide'); slides.forEach((slide, index) => { if (index === slides.length - 1) { slide.style.transform = 'translateX(100%)'; } else { slide.style.transform = 'translateX(' + ((index + 1) * 100) + '%)'; } }); } ```

阅读全文