php广告图片循环播放 幻灯片效果 !DOCTYPEhtmlhead meta http-equiv="content-type" content="text/html" charset="utf-8" titleImage play/title style body{ width : 430px; margin : 20px auto; } p . now{ display : block; width : 400px; height : 200p
php广告图片循环播放 幻灯片效果
<meta http-equiv="content-type" content="text/html" charset="utf-8">
<title>Image play</title>
<style><span style="color: #000000;">
body{
width:<span style="color: #000000;">430px;
margin:<span style="color: #000000;">20px auto;
}
p.<span style="color: #000000;">now{
display:<span style="color: #000000;">block;
width:<span style="color: #000000;">400px;
height:<span style="color: #000000;">200px;
overflow:<span style="color: #000000;">hidden;
border:1px solid <span style="color: #008000;">#<span style="color: #008000;">ccc;
<span style="color: #000000;"> }
li.<span style="color: #000000;">now{
color:<span style="color: #008000;">#<span style="color: #008000;">ccc;
<span style="color: #000000;"> }
li{
<span style="color: #0000ff;">list-style:<span style="color: #000000;">none;
<span style="color: #0000ff;">float:<span style="color: #000000;">left;
padding:0<span style="color: #000000;"> 10px;
margin-bottom:<span style="color: #000000;">5px;
border:1px solid <span style="color: #008000;">#<span style="color: #008000;">ccc;
background:<span style="color: #008000;">#<span style="color: #008000;">eee;
<span style="color: #000000;"> }
<span style="color: #008000;">#<span style="color: #008000;">fd{
<span style="color: #0000ff;">list-style:<span style="color: #000000;">none;
<span style="color: #0000ff;">float:<span style="color: #000000;">left;
padding:0<span style="color: #000000;"> 10px;
border:1px solid <span style="color: #008000;">#<span style="color: #008000;">ccc;
margin:0<span style="color: #000000;"> auto;
background:<span style="color: #008000;">#<span style="color: #008000;">eee;
<span style="color: #000000;"> }
img{
width:<span style="color: #000000;">400px;
height:<span style="color: #000000;">200px;
padding:<span style="color: #000000;">1px;
<span style="color: #008000;">/*<span style="color: #008000;">padding-top:18px;<span style="color: #008000;">*/<span style="color: #000000;">
}
</style>
<div id="fd">
<p style="color: #0000ff;">class="now"><img src="./images/pic1.jpg" alt="php广告图片循环播放 幻灯片成效" ></p>
<p style="display:none;"><img src="./images/pic2.jpg" alt="php广告图片循环播放 幻灯片成效" ></p>
<p style="display:none;"><img src="./images/pic3.jpg" alt="php广告图片循环播放 幻灯片成效" ></p>
<p style="display:none;"><img src="./images/pic4.jpg" alt="php广告图片循环播放 幻灯片成效" ></p>
<ul>
<li style="color: #0000ff;">class="now">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script>
<span style="color: #0000ff;">var tags=$("fd").getElementsByTagName("li"); <span style="color: #008000;">//<span style="color: #008000;"> 获取切换按钮节点
<span style="color: #0000ff;">var cats=$("fd").getElementsByTagName("p"); <span style="color: #008000;">//<span style="color: #008000;"> 获取切换内容节点
<span style="color: #0000ff;">var <span style="color: #008080;">current; <span style="color: #008000;">//<span style="color: #008000;"> 高置当前帧的变量宣容器
<span style="color: #0000ff;">var timer=2000; <span style="color: #008000;">//<span style="color: #008000;"> 设置2秒循环一次
<span style="color: #0000ff;">function<span style="color: #000000;"> disAll(){
<span style="color: #0000ff;">for(<span style="color: #0000ff;">var i=0; i<tags.length; i++<span style="color: #000000;">){
tags[i].className=""<span style="color: #000000;">;
cats[i].className=""<span style="color: #000000;">;
cats[i].style.display="none"<span style="color: #000000;">;
}
}
<span style="color: #0000ff;">function<span style="color: #000000;"> setNow(){
<span style="color: #0000ff;">for(<span style="color: #0000ff;">var i=0; i<tags.length; i++<span style="color: #000000;">){
<span style="color: #0000ff;">if(tags[i].className=="now"<span style="color: #000000;">){
<span style="color: #008080;">current=<span style="color: #000000;">i;
}
}
}
<span style="color: #0000ff;">for(<span style="color: #0000ff;">var j=0; j<tags.length; j++<span style="color: #000000;">){
tags[j].onmouseover=<span style="color: #0000ff;">function<span style="color: #000000;">(){
clearInterval(h);
disAll();
this.className="now"<span style="color: #000000;">;
setNow();
cats[<span style="color: #008080;">current].style.display="block"<span style="color: #000000;">;
cats[<span style="color: #008080;">current].className="now"<span style="color: #000000;">;
}
tags[j].onmouseout=<span style="color: #0000ff;">function<span style="color: #000000;">(){
setNow();
h=setInterval("goNext()", 3000<span style="color: #000000;">);
}
}
<span style="color: #0000ff;">function<span style="color: #000000;"> goNext(){
setNow();
<span style="color: #008080;">current+=1<span style="color: #000000;">;
<span style="color: #0000ff;">if(<span style="color: #008080;">current>=parseInt(tags.<span style="color: #000000;">length)){
<span style="color: #008080;">current=0<span style="color: #000000;">;
disAll();
ca【本文来自鸿网互联 (http://www.68idc.cn)】ts[0].style.display="block"<span style="color: #000000;">;
tags[0].className="now"<span style="color: #000000;">;
cats[0].className="now"<span style="color: #000000;">;
}<span style="color: #0000ff;">else<span style="color: #000000;">{
disAll();
cats[<span style="color: #008080;">current].style.display="block"<span style="color: #000000;">;
cats[<span style="color: #008080;">current].className="now"<span style="color: #000000;">;
tags[<span style="color: #008080;">current].className="now"<span style="color: #000000;">;
}
}
<span style="color: #0000ff;">var h=setInterval("goNext()",<span style="color: #000000;"> timer);
<span style="color: #0000ff;">function<span style="color: #000000;"> $(obj){
<span style="color: #0000ff;">return document.<span style="color: #000000;">getElementById(obj);
}
</script>
