首页使用 HTML、CSS 和 JS 制作动态网页，具体可以实现一些页面动态效果，比如滚动轮播图、浮动动画，给我一个案例

使用 HTML、CSS 和 JS 制作动态网页，具体可以实现一些页面动态效果，比如滚动轮播图、浮动动画，给我一个案例

时间: 2024-05-08 16:19:24 浏览: 169

当然可以，以下是一个简单的案例： HTML代码： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>动态网页案例</title> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <div class="container"> <h1>欢迎来到动态网页案例</h1> <ul> <li>首页</li> <li>产品中心</li> <li>关于我们</li> <li>联系我们</li> </ul> <img src="slide1.jpg" id="slider"> </div> </body> </html> ``` CSS代码： ``` .container { margin: 0 auto; text-align: center; } ul { list-style-type: none; margin: 0; padding: 0; display: inline-block; } li { display: inline-block; margin-right: 20px; font-size: 24px; } #slider { width: 400px; height: 300px; margin-top: 20px; border: 2px solid black; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } ``` Javascript 代码： ``` var images = ["slide1.jpg", "slide2.jpg", "slide3.jpg"]; var currentIndex = 0; var slider = document.getElementById("slider"); setInterval(function() { if (currentIndex == images.length) { currentIndex = 0; } slider.src = images[currentIndex]; currentIndex++; }, 3000); ``` 这个案例中，我们使用 HTML 和 CSS 创建了一个简单的页面，并且使用 Javascript 制作了一个自动滚动的轮播图效果。我们通过设置一个图片数组和当前索引值，然后使用 setInterval 函数，定期更改图片的 src 属性来实现轮播图效果。

阅读全文