php广告图片循环播放 幻灯片效果，
- WBOYOriginal
- 2016-06-13 08:54:431096Durchsuche
php广告图片循环播放 幻灯片效果，
<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<title>Image play</title>
<style><span>
body{
width</span>:<span>430px;
margin</span>:<span>20px auto;
}
p</span>.<span>now{
display</span>:<span>block;
width</span>:<span>400px;
height</span>:<span>200px;
overflow</span>:<span>hidden;
border</span>:1px solid <span>#</span><span>ccc;</span>
<span> }
li</span>.<span>now{
color</span>:<span>#</span><span>ccc;</span>
<span> }
li{
</span><span>list</span>-style:<span>none;
</span><span>float</span>:<span>left;
padding</span>:0<span> 10px;
margin</span>-bottom:<span>5px;
border</span>:1px solid <span>#</span><span>ccc;</span>
background:<span>#</span><span>eee;</span>
<span> }
</span><span>#</span><span>fd{</span>
<span>list</span>-style:<span>none;
</span><span>float</span>:<span>left;
padding</span>:0<span> 10px;
border</span>:1px solid <span>#</span><span>ccc;</span>
margin:0<span> auto;
background</span>:<span>#</span><span>eee;</span>
<span> }
img{
width</span>:<span>400px;
height</span>:<span>200px;
padding</span>:<span>1px;
</span><span>/*</span><span>padding-top:18px;</span><span>*/</span><span>
}
</span></style>
</head>
<body>
<div id="fd">
<p <span>class</span>="now"><img src="./images/pic1.jpg" alt="php广告图片循环播放 幻灯片效果，" ></p>
<p>class</span>="now">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script>
<span>var</span> tags=$("fd").getElementsByTagName("li"); <span>//</span><span> 获取切换按钮节点</span>
<span>var</span> cats=$("fd").getElementsByTagName("p"); <span>//</span><span> 获取切换内容节点</span>
<span>var</span> <span>current</span>; <span>//</span><span> 高置当前帧的变量宣容器</span>
<span>var</span> timer=2000; <span>//</span><span> 设置2秒循环一次</span>
<span>function</span><span> disAll(){
</span><span>for</span>(<span>var</span> i=0; i<tags.length; i++<span>){
tags[i]</span>.className=""<span>;
cats[i]</span>.className=""<span>;
cats[i]</span>.style.display="none"<span>;
}
}
</span><span>function</span><span> setNow(){
</span><span>for</span>(<span>var</span> i=0; i<tags.length; i++<span>){
</span><span>if</span>(tags[i].className=="now"<span>){
</span><span>current</span>=<span>i;
}
}
}
</span><span>for</span>(<span>var</span> j=0; j<tags.length; j++<span>){
tags[j]</span>.onmouseover=<span>function</span><span>(){
clearInterval(h);
disAll();
this</span>.className="now"<span>;
setNow();
cats[</span><span>current</span>].style.display="block"<span>;
cats[</span><span>current</span>].className="now"<span>;
}
tags[j]</span>.onmouseout=<span>function</span><span>(){
setNow();
h</span>=setInterval("goNext()", 3000<span>);
}
}
</span><span>function</span><span> goNext(){
setNow();
</span><span>current</span>+=1<span>;
</span><span>if</span>(<span>current</span>>=parseInt(tags.<span>length)){
</span><span>current</span>=0<span>;
disAll();
cats[</span>0].style.display="block"<span>;
tags[</span>0].className="now"<span>;
cats[</span>0].className="now"<span>;
}</span><span>else</span><span>{
disAll();
cats[</span><span>current</span>].style.display="block"<span>;
cats[</span><span>current</span>].className="now"<span>;
tags[</span><span>current</span>].className="now"<span>;
}
}
</span><span>var</span> h=setInterval("goNext()",<span> timer);
</span><span>function</span><span> $(obj){
</span><span>return</span> document.<span>getElementById(obj);
}
</span></script>
</body>
</html>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：php文件扩展名判断，Nächster Artikel：四个常见html网页乱码问题及解决办法，html乱码