JavaScript实现简单的轮播图效果
HTMl
<body> <p>图片轮播</p> <div class="imgBox"> <img class="img-slide img1" src="./2.jpg" alt="1"> <img class="img-slide img2" src="./3.jpg" alt="2"> <img class="img-slide img3" src="./4.jpg" alt="3"> </div> </body>
CSS
<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>
JAVAScript
<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,1000); </script>
