首页左边文字右边图片用定时器轮播

左边文字右边图片用定时器轮播

时间: 2023-07-18 22:09:02 浏览: 95

好的，我可以为您提供一种简单的实现方式。您可以按照以下步骤进行操作： 1. 定义一个包含所有图片路径的数组。 2. 定义一个变量来表示当前显示的图片的索引值，初始值为0。 3. 使用定时器（setInterval）来循环执行一个函数，每次执行时将当前图片的索引值加1，并将其对数组长度取余，以实现图片轮播。 4. 将当前图片的路径设置为img标签的src属性值，从而显示该图片。以下是示例代码： ```html <!DOCTYPE html> <html> <head> <title>图片轮播</title> <style type="text/css"> #slider { width: 500px; height: 300px; overflow: hidden; } #slider img { width: 100%; height: 100%; } </style> </head> <body> <div id="slider"> <img src="" alt="图片"> </div> <script type="text/javascript"> var images = ["img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg"]; //图片路径数组 var index = 0; //当前显示的图片的索引值 //定时器函数，用于实现图片轮播 setInterval(function() { index = (index + 1) % images.length; //取余运算，实现循环 document.querySelector("#slider img").src = images[index]; //设置img标签的src属性 }, 2000); //每隔2秒执行一次 </script> </body> </html> ``` 您可以将上述代码复制到一个文件中并保存为.html文件，然后在浏览器中打开该文件，即可看到轮播效果。

阅读全文