JS+CSS实现淡入式焦点图片幻灯切换效果的方法
本文实例讲述了JS+CSS实现淡入式焦点图片幻灯切换效果的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>一款JS+CSS淡入式焦点图片幻灯切换效果</title>
<style>
body,div,ul,li{margin:0;padding:0;}
ul{list-style-type:none;}
body{background:#000;text-align:center;font:12px/20pxArial;}
#box{position:relative;width:322px;height:172px;background:#fff;border-radius:5px;border:8pxsolid#fff;margin:10pxauto;}
#box.list{position:relative;width:320px;height:240px;overflow:hidden;border:1pxsolid#ccc;}
#box.listli{position:absolute;top:0;left:0;width:320px;height:240px;opacity:0;filter:alpha(opacity=0);}
#box.listli.current{opacity:1;filter:alpha(opacity=100);}
#box.count{position:absolute;right:0;bottom:5px;}
#box.countli{color:#fff;float:left;width:20px;height:20px;cursor:pointer;margin-right:5px;overflow:hidden;background:#F90;opacity:0.7;filter:alpha(opacity=70);border-radius:20px;}
#box.countli.current{color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60;}
#tmp{width:100px;height:100px;background:red;position:absolute;}
</style>
<scripttype="text/javascript">
window.onload=function()
{
varoBox=document.getElementById("box");
varaUl=document.getElementsByTagName("ul");
varaImg=aUl[0].getElementsByTagName("li");
varaNum=aUl[1].getElementsByTagName("li");
vartimer=play=null;
vari=index=0;
//切换按钮
for(i=0;i<aNum.length;i++)
{
aNum[i].index=i;
aNum[i].onmouseover=function()
{
show(this.index)
}
}
//鼠标划过关闭定时器
oBox.onmouseover=function()
{
clearInterval(play)
};
//鼠标离开启动自动播放
oBox.onmouseout=function()
{
autoPlay()
};
//自动播放函数
functionautoPlay()
{
play=setInterval(function(){
index++;
index>=aImg.length&&(index=0);
show(index);
},2000);
}
autoPlay();//应用图片切换淡入淡出效果
functionshow(a)
{
index=a;
varalpha=0;
for(i=0;i<aNum.length;i++)aNum[i].className="";
aNum[index].className="current";
clearInterval(timer);
for(i=0;i<aImg.length;i++)
{
aImg[i].style.opacity=0;
aImg[i].style.filter="alpha(opacity=0)";
}
timer=setInterval(function(){
alpha+=2;
alpha>100&&(alpha=100);
aImg[index].style.opacity=alpha/100;
aImg[index].style.filter="alpha(opacity="+alpha+")";
alpha==100&&clearInterval(timer)
},20);
}
};
</script>
</head>
<body>
<divid="box">
<ulclass="list">
<liclass="current"><imgsrc="/images/m01.jpg"width="320"height="240"/></li>
<li><imgsrc="/images/m02.jpg"width="320"height="240"/></li>
<li><imgsrc="/images/m03.jpg"width="320"height="240"/></li>
<li><imgsrc="/images/m04.jpg"width="320"height="240"/></li>
<li><imgsrc="/images/m05.jpg"width="320"height="240"/></li>
</ul>
<ulclass="count">
<liclass="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。