Maison >développement back-end >tutoriel php >Utiliser PHP pour implémenter la lecture en boucle des images publicitaires
<!DOCTYPE> <html> <head> <meta http-equiv="content-type" content="text/html" charset="utf-8"> <title>Image play</title> <style> body{ width:430px; margin:20px auto; } p.now{ display:block; width:400px; height:200px; overflow:hidden; border:1px solid #ccc; } li.now{ color:#ccc; } li{ list-style:none; float:left; padding:0 10px; margin-bottom:5px; border:1px solid #ccc; background:#eee; } #fd{ list-style:none; float:left; padding:0 10px; border:1px solid #ccc; margin:0 auto; background:#eee; } img{ width:400px; height:200px; padding:1px; /*padding-top:18px;*/ } </style> </head> <body> <p id="fd"> <p class="now"><img src="./images/pic1.jpg"></p> <p style="display:none;"><img src="./images/pic2.jpg"></p> <p style="display:none;"><img src="./images/pic3.jpg"></p> <p style="display:none;"><img src="./images/pic4.jpg"></p> <ul> <li class="now">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </p> <script> var tags=$("fd").getElementsByTagName("li"); // 获取切换按钮节点 var cats=$("fd").getElementsByTagName("p"); // 获取切换内容节点 var current; // 高置当前帧的变量宣容器 var timer=2000; // 设置2秒循环一次 function disAll(){ for(var i=0; i<tags.length; i++){ tags[i].className=""; cats[i].className=""; cats[i].style.display="none"; } } function setNow(){ for(var i=0; i<tags.length; i++){ if(tags[i].className=="now"){ current=i; } } } for(var j=0; j<tags.length; j++){ tags[j].onmouseover=function(){ clearInterval(h); disAll(); this.className="now"; setNow(); cats[current].style.display="block"; cats[current].className="now"; } tags[j].onmouseout=function(){ setNow(); h=setInterval("goNext()", 3000); } } function goNext(){ setNow(); current+=1; if(current>=parseInt(tags.length)){ current=0; disAll(); cats[0].style.display="block"; tags[0].className="now"; cats[0].className="now"; }else{ disAll(); cats[current].style.display="block"; cats[current].className="now"; tags[current].className="now"; } } var h=setInterval("goNext()", timer); function $(obj){ return document.getElementById(obj); }</script> </body> </html>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!