JavaScript实现相册幻灯片效果
2011-01-04 17:52
417 查看
<style type="text/css">
.woon{border:1px solid #fff;}
.wooff{border:1px solid #D85C8A;filter:progid:DXImagetransform.Microsoft.Alpha(style=1,opacity=100,finishOpacity=0);}
</style>
<table width=252 border=0 align=center cellPadding=0 cellSpacing=0 background="http://img1.qq.com/lady/pics/3931/3931550.jpg">
<tr>
<td height="470" align="center">
<div id=fc style="filter:progid:DXImagetransform.Microsoft.GradientWipe(duration=3,gradientSize=0.5,motion=forward ); WIDTH:240px; HEIGHT:454px; border:1px solid #D85C8A">
<div style="display:block"><a
href="http://lady.qq.com/a/20081202/000001.htm" target=_blank><img onMouseOver=clearAuto();
onMouseOut=setAuto() height=454
src="http://mat1.qq.com/lady/images/index/2008/12/02/hot1.jpg" width=240 border=0></a></div>
<div style="display: none"><a href="http://lady.qq.com/zt/2008/damingxing/index.htm" target="_blank"><img onmouseover=clearAuto();
onmouseout=setAuto() height=454
src="http://mat1.qq.com/lady/images/index/2008/11/23/f2.jpg" width=240 border=0></a></div>
<div style="display: none"><A href="http://lady.qq.com/a/20081202/000031.htm" target=_blank><img onmouseover=clearAuto();
onmouseout=setAuto() height=454
src="http://mat1.qq.com/lady/images/index/2008/12/02/hot3.jpg" width=240 border=0></A></div>
<div style="display: none"><a href="http://lady.qq.com/a/20081202/000013.htm" target=_blank><img onmouseover=clearAuto();
onmouseout=setAuto() height=454
src="http://mat1.qq.com/lady/images/index/2008/12/02/hot4.jpg" width=240 border=0></a></div>
</div></td>
</tr>
<tr>
<td height=99 valign="top"> <table border=0 align=center cellPadding=0 cellSpacing=1 id=num>
<tr>
<td class="woon" onmouseover=clearAuto(); onclick=Mea(0); onmouseout=setAuto()
><img src="http://mat1.qq.com/lady/images/index/2008/12/02/hot01.jpg" width="57" height="90" style="cursor: hand" onDblClick="MM_openBrWindow('http://lady.qq.com/a/20081202/000001.htm','','')"></td>
<td class="wooff" onmouseover=clearAuto();
onclick=Mea(1); onmouseout=setAuto()
><img src="http://mat1.qq.com/lady/images/index/2008/11/23/s2.jpg" width="57" height="90" border="0" style="cursor: hand" onDblClick="MM_openBrWindow('http://lady.qq.com/zt/2008/damingxing/index.htm','','')"></td>
<td class="wooff" onmouseover=clearAuto();
onclick=Mea(2); onmouseout=setAuto()
><img src="http://mat1.qq.com/lady/images/index/2008/12/02/hot03.jpg" width="57" height="90" border="0" style="cursor: hand" onDblClick="MM_openBrWindow('http://lady.qq.com/a/20081202/000031.htm','','')"></td>
<td class="wooff" onmouseover=clearAuto();
onclick=Mea(3); onmouseout=setAuto()
><img src="http://mat1.qq.com/lady/images/index/2008/12/02/hot04.jpg" width="57" height="90" style="cursor: hand" onDblClick="MM_openBrWindow('http://lady.qq.com/a/20081202/000013.htm','','')"></td>
</table></td>
</tr>
</table>
<script>
var n=0;
var showNum = document.getElementById("num");
function Mea(value){
n=value;
setBg(value);
plays(value);
}
function setBg(value){
for(var i=0;i<4;i++)
if(value==i){
showNum.getElementsByTagName("td")[i].className='woon';
}
else{
showNum.getElementsByTagName("td")[i].className='wooff';
}
}
function plays(value){
with (fc){
filters[0].Apply();
for(i=0;i<4;i++)i==value?children[i].style.display="block":children[i].style.display="none";
filters[0].play();
}
}
function clearAuto(){clearInterval(autoStart)}
function setAuto(){autoStart=setInterval("auto(n)", 5000)}
function auto(){
n++;
if(n>3)n=0;
Mea(n);
}
function sub(){
n--;
if(n<0)n=3;
Mea(n);
}
setAuto();
</script>
本篇文章出自『一路聆听,有你有我』:http://www.wlzxy.com/blog/article.asp?id=54 转载请保留此声明!
.woon{border:1px solid #fff;}
.wooff{border:1px solid #D85C8A;filter:progid:DXImagetransform.Microsoft.Alpha(style=1,opacity=100,finishOpacity=0);}
</style>
<table width=252 border=0 align=center cellPadding=0 cellSpacing=0 background="http://img1.qq.com/lady/pics/3931/3931550.jpg">
<tr>
<td height="470" align="center">
<div id=fc style="filter:progid:DXImagetransform.Microsoft.GradientWipe(duration=3,gradientSize=0.5,motion=forward ); WIDTH:240px; HEIGHT:454px; border:1px solid #D85C8A">
<div style="display:block"><a
href="http://lady.qq.com/a/20081202/000001.htm" target=_blank><img onMouseOver=clearAuto();
onMouseOut=setAuto() height=454
src="http://mat1.qq.com/lady/images/index/2008/12/02/hot1.jpg" width=240 border=0></a></div>
<div style="display: none"><a href="http://lady.qq.com/zt/2008/damingxing/index.htm" target="_blank"><img onmouseover=clearAuto();
onmouseout=setAuto() height=454
src="http://mat1.qq.com/lady/images/index/2008/11/23/f2.jpg" width=240 border=0></a></div>
<div style="display: none"><A href="http://lady.qq.com/a/20081202/000031.htm" target=_blank><img onmouseover=clearAuto();
onmouseout=setAuto() height=454
src="http://mat1.qq.com/lady/images/index/2008/12/02/hot3.jpg" width=240 border=0></A></div>
<div style="display: none"><a href="http://lady.qq.com/a/20081202/000013.htm" target=_blank><img onmouseover=clearAuto();
onmouseout=setAuto() height=454
src="http://mat1.qq.com/lady/images/index/2008/12/02/hot4.jpg" width=240 border=0></a></div>
</div></td>
</tr>
<tr>
<td height=99 valign="top"> <table border=0 align=center cellPadding=0 cellSpacing=1 id=num>
<tr>
<td class="woon" onmouseover=clearAuto(); onclick=Mea(0); onmouseout=setAuto()
><img src="http://mat1.qq.com/lady/images/index/2008/12/02/hot01.jpg" width="57" height="90" style="cursor: hand" onDblClick="MM_openBrWindow('http://lady.qq.com/a/20081202/000001.htm','','')"></td>
<td class="wooff" onmouseover=clearAuto();
onclick=Mea(1); onmouseout=setAuto()
><img src="http://mat1.qq.com/lady/images/index/2008/11/23/s2.jpg" width="57" height="90" border="0" style="cursor: hand" onDblClick="MM_openBrWindow('http://lady.qq.com/zt/2008/damingxing/index.htm','','')"></td>
<td class="wooff" onmouseover=clearAuto();
onclick=Mea(2); onmouseout=setAuto()
><img src="http://mat1.qq.com/lady/images/index/2008/12/02/hot03.jpg" width="57" height="90" border="0" style="cursor: hand" onDblClick="MM_openBrWindow('http://lady.qq.com/a/20081202/000031.htm','','')"></td>
<td class="wooff" onmouseover=clearAuto();
onclick=Mea(3); onmouseout=setAuto()
><img src="http://mat1.qq.com/lady/images/index/2008/12/02/hot04.jpg" width="57" height="90" style="cursor: hand" onDblClick="MM_openBrWindow('http://lady.qq.com/a/20081202/000013.htm','','')"></td>
</table></td>
</tr>
</table>
<script>
var n=0;
var showNum = document.getElementById("num");
function Mea(value){
n=value;
setBg(value);
plays(value);
}
function setBg(value){
for(var i=0;i<4;i++)
if(value==i){
showNum.getElementsByTagName("td")[i].className='woon';
}
else{
showNum.getElementsByTagName("td")[i].className='wooff';
}
}
function plays(value){
with (fc){
filters[0].Apply();
for(i=0;i<4;i++)i==value?children[i].style.display="block":children[i].style.display="none";
filters[0].play();
}
}
function clearAuto(){clearInterval(autoStart)}
function setAuto(){autoStart=setInterval("auto(n)", 5000)}
function auto(){
n++;
if(n>3)n=0;
Mea(n);
}
function sub(){
n--;
if(n<0)n=3;
Mea(n);
}
setAuto();
</script>
本篇文章出自『一路聆听,有你有我』:http://www.wlzxy.com/blog/article.asp?id=54 转载请保留此声明!
相关文章推荐
- javascript实现图片切换的幻灯片效果源代码
- 【web前端】JavaScript实现图片幻灯片滚动播放动画效果
- javascript实现淘宝幻灯片广告展示效果
- 原生JavaScript实现幻灯片效果
- javascript实现幻灯片效果
- 用javascript实现幻灯片效果
- Javascript实现幻灯片效果
- [转载]javascript练习(二)JS实现淘宝幻灯片效果
- CSS3+JavaScript实现翻页幻灯片效果
- 基于javascript实现动态时钟效果
- JavaScript实现一个最基本的图片无缝横向滚动效果
- javascript实现的登陆遮罩效果汇总
- JS实现图片幻灯片效果
- JavaScript实现最简单的拖拽效果
- JavaScript实现瀑布流以及加载效果
- javascript特效实现(4)——当前时间和倒计时效果
- 原生javascript实现匀速运动动画效果
- javascript 实现遮盖层效果
- javascript 特效实现(2)——回到顶部效果