Home > Article > Backend Development > PHP advertising image loop slideshow effect, _PHP tutorial
PHP advertising image loop slideshow effect, _PHP tutorial
- WBOYOriginal
- 2016-07-13 16:53:51957browse
php advertising image loop slideshow effect,
<!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"></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>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：[PHP] Solve the problem of garbled html web pages, phphtml web pages are garbled_PHP tutorialNext article：[PHP] Solve the problem of garbled html web pages, phphtml web pages are garbled_PHP tutorial