PHP를 사용하여 광고 이미지의 루프 재생 구현
- 一个新手원래의
- 2017-09-12 10:10:401769검색
<!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>
위 내용은 PHP를 사용하여 광고 이미지의 루프 재생 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：PHP에서 세션 제어를 이해하는 방법다음 기사：PHP에서 세션 제어를 이해하는 방법