首页php轮播图片代码

php轮播图片代码

时间: 2023-07-03 12:18:23 浏览: 99

以下是一个简单的 PHP 轮播图片代码： ```php <!DOCTYPE html> <html> <head> <title>PHP轮播图片</title> <style type="text/css"> .container { width: 80%; margin: 0 auto; position: relative; } .container img { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-in-out; max-width: 100%; height: auto; } .container img.active { opacity: 1; } </style> </head> <body> <div class="container"> <?php $images = array("image1.jpg", "image2.jpg", "image3.jpg"); foreach ($images as $index => $image) { $active = $index == 0 ? "active" : ""; echo '<img src="'.$image.'" class="'.$active.'">'; } ?> </div> <script> var images = document.querySelectorAll('.container img'); var currentIndex = 0; var timeout; function startSlideshow() { timeout = setInterval(function() { images[currentIndex].classList.remove('active'); currentIndex = (currentIndex + 1) % images.length; images[currentIndex].classList.add('active'); }, 3000); } startSlideshow(); </script> </body> </html> ``` 这个代码使用 PHP 动态生成图片轮播的 HTML 代码，并使用 JavaScript 实现图片轮播的功能。在这个例子中，你可以将 `$images` 数组中的图片路径更改为你自己的图片路径。

阅读全文