图片轮换渐变效果

最新推荐文章于 2022-07-17 17:57:50 发布

最新推荐文章于 2022-07-17 17:57:50 发布 · 173 阅读

文章标签：

#QQ #JavaScript #Microsoft #CSS #ViewUI

本文介绍了一种使用HTML、CSS及JavaScript实现的网页图片轮播效果。通过设置不同的图片显示和隐藏状态，配合按钮切换图片，并利用定时器实现自动轮播功能。此方案适用于创建动态网站内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<styletype="text/css">
.woon{border:1pxsolid#fff;}
.wooff{border:1pxsolid#ffffff;filter:progid:DXImagetransform.Microsoft.Alpha(style=1,opacity=1500,finishOpacity=1);}
</style>
<scriptlanguage="JavaScript"type="text/JavaScript">

</script>
<tablewidth=252border=0align=centercellPadding=0cellSpacing=0background="http://img1.qq.com/lady/pics/3931/3931550.jpg">
<tr>
<tdheight="470"align="center">
<divid=fcstyle="filter:progid:DXImagetransform.Microsoft.GradientWipe(duration=3,gradientSize=0.5,motion=forward);WIDTH:240px;HEIGHT:454px;border:1pxsolid#D85C8A">
<divstyle="display:block"><A
href="http://lady.qq.com/a/20071007/000003.htm"target=_blank><imgonmouseover=clearAuto();
onmouseout=setAuto()height=454
src="http://mat1.qq.com/lady/images/index/2007/10/07/hot1.jpg"width=240border=0></A></div>

<divstyle="display:none"><ahref="http://lady.qq.com/a/20071007/000009.htm"target="_blank"><imgonmouseover=clearAuto();
onmouseout=setAuto()height=454
src="http://mat1.qq.com/lady/images/index/2007/10/07/hot2.jpg"width=240border=0></a></div>

<divstyle="display:none"><Ahref="http://lady.qq.com/a/20071007/000005.htm"target=_blank><imgonmouseover=clearAuto();
onmouseout=setAuto()height=454
src="http://mat1.qq.com/lady/images/index/2007/10/07/hot3.jpg"width=240border=0></A></div>
<divstyle="display:none"><ahref="http://lady.qq.com/a/20071007/000006.htm"target=_blank><imgonmouseover=clearAuto();
onmouseout=setAuto()height=454
src="http://mat1.qq.com/lady/images/index/2007/10/07/hot4.jpg"width=240border=0></a></div>
</div></td>
</tr>
<tr>
<tdheight=99valign="top"><tableborder=0align=centercellPadding=0cellSpacing=1id=num>
<tr>

<tdclass=woononmouseover=clearAuto();onclick=Mea(0);onmouseout=setAuto()
><imgsrc="http://mat1.qq.com/lady/images/index/2007/10/07/hot01.jpg"width="57"height="90"style="cursor:hand"onDblClick="MM_openBrWindow('http://lady.qq.com/a/20071007/000003.htm','','')"></td>

<tdclass=wooffonmouseover=clearAuto();
onclick=Mea(1);onmouseout=setAuto()
><imgsrc="http://mat1.qq.com/lady/images/index/2007/10/07/hot02.jpg"width="57"height="90"border="0"style="cursor:hand"onDblClick="MM_openBrWindow('http://lady.qq.com/a/20071007/000009.htm','','')"></td>
<tdclass=wooffonmouseover=clearAuto();
onclick=Mea(2);onmouseout=setAuto()
><imgsrc="http://mat1.qq.com/lady/images/index/2007/10/07/hot03.jpg"width="57"height="90"style="cursor:hand"onDblClick="MM_openBrWindow('http://lady.qq.com/a/20071007/000005.htm','','')"></td>

<tdclass=wooffonmouseover=clearAuto();
onclick=Mea(3);onmouseout=setAuto()
><imgsrc="http://mat1.qq.com/lady/images/index/2007/10/07/hot04.jpg"width="57"height="90"style="cursor:hand"onDblClick="MM_openBrWindow('http://lady.qq.com/a/20071007/000006.htm','','')"></td>
</td>
</tr>

</table>

<script>
varn=0;
varshowNum=document.getElementById("num");
functionMea(value){
n=value;
setBg(value);
plays(value);
}
functionsetBg(value){
for(vari=0;i<4;i++)
if(value==i){
showNum.getElementsByTagName("td")[i].className='woon';
}
else{
showNum.getElementsByTagName("td")[i].className='wooff';
}
}
functionplays(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();
}
}
functionclearAuto(){clearInterval(autoStart)}
functionsetAuto(){autoStart=setInterval("auto(n)",5000)}
functionauto(){
n++;
if(n>3)n=0;
Mea(n);
}
functionsub(){
n--;
if(n<0)n=3;
Mea(n);
}
setAuto();
</script>
</body>
</html>