标签:nbsp font spl 定时 interval strong cad splay sed
每过2秒,动态切换图片
<!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-famliy:fantasy; } .imgbox{ border-top:2px solid cadetblue; width:50%; height:500px; margin:0 auto; } .imgbox img{ width:60%; height:300px; margin:0 auto; /*padding 边际,四周均涉及*/ padding-top:30px; /*//图片居中*/ display:none; /*text-align:center;*/ /*vertical-align:middle;*/ } .img1{ display:block; } .img2{ display:none } .img3{ display:none; padding-bottom:30px; } </style> </head> <body> <p>图片轮播</p> <div class="imgbox"> <img class="img-slide img1" src="img1.jpg" alt="1"> <img class="img-slide img2" src="img2.jpg" alt="2"> <img class="img-slide img3" src="img3.jpg" alt="3"> </div> <script type="text/javascript"> var index=0; //改变图片 function imagecha(){ //改变图片 var a=document.getElementsByClassName("img-slide");//获取所有带有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‘; index++; } //设置定时器,每隔两秒钟切换图片 setInterval(imagecha,2000); </script> </body> </html>
标签:nbsp font spl 定时 interval strong cad splay sed
原文地址:https://www.cnblogs.com/yuyukun/p/12813809.html