时间：2023-09-06 11:48:02 | 来源：网站运营
时间：2023-09-06 11:48:02 来源：网站运营
html图片轮播原理：图片轮播是怎么做的呢？
在线咨询
<html><script type="text/javascript">ps=new Array("hua1.jpg","hua2.jpg","a.jpeg","hua3.jpg");var i=0;function hanshu(){ i++; if(i>=ps.length) i=0; document.getElementById("tu").src=ps[i]; }setInterval(hanshu,1000);</script><img id="tu" width=300px height=200px></img></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图实现</title> <style type="text/css"> /*标题样式*/ p{ text-align: center; font-size: 25px; color: cadetblue; font-family: fantasy; } .imgBox{ border-top: 2px solid cadetblue; width: 50%; height: 500px; margin: 0 auto; } .imgBox img{ width: 60%; height: 300px; margin: 0 auto; padding-top: 30px; } .img1{ display: block; } .img2{ display: none; } .img3{ display: none; } </style></head><body><p>图片轮播</p><div class="imgBox"> <img class="img-slide img1" src="hua1.jpg" alt="1"> <img class="img-slide img2" src="a.jpeg" alt="2"> <img class="img-slide img3" src="hua2.jpg" alt="3"> </div></body><script type="text/javascript"> var index=0; //改变图片 function ChangeImg() { index++; var a=document.getElementsByClassName("img-slide"); if(index>=a.length) index=0; for(var i=0;i<a.length;i++){ a[i].style.display='none'; } a[index].style.display='block'; } //设置定时器，每隔两秒切换一张图片 setInterval(ChangeImg,2000);</script></html>这份代码来自：关键词：原理,图片
