js渐隐渐现透明度变化淡入淡出轮播图、焦点图
一些广告banner展示常见。
(附件)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
a{text-decoration:none;color:#fff;}
#box{height:454px;width:730px;margin:50px auto;position:relative;}
ul{list-style:none;}
#picture li img{vertical-align:bottom}
#picture li{position:absolute;opacity:0}
#picture .show{opacity:1}
#list{width:100%;text-align:center;position:absolute;bottom:10px;}
#list a{display:inline-block;height:18px;width:18px;background:aqua;border-radius:50%;
margin:4px;font-size:12px;font-family: "微软雅黑";}
#list .coloe{background:red}
#btn{display:none;}
#btn a{height:62px;width:28px;font-size:24px;text-align:center;line-height:62px;position:absolute;
background:#ccc;margin-top:-31px;display:inline-block;top:50%;}
#left{left:0}
#right{right:0}
img{width:730px;height:454px;}
</style>
<script type="text/javascript" src="js/fengzhuanghanshu.js"></script>
<script type="text/javascript">
window.onload=function(){
var aLi=picture.getElementsByTagName("li");
var aA=list.getElementsByTagName("a");
var iCur=0;
timer=setInterval(function(){
iCur++;
if(iCur>=aLi.length){
iCur=0
}
for(var i=0;i<aLi.length;i++){
startMove(aLi[i],{opacity:0})
aA[i].style.background="aqua"
}
startMove(aLi[iCur],{opacity:100})
aA[iCur].style.background="red"
},2000)
box.onmouseover=function(){
clearInterval(timer);
btn.style.display="block"
}
box.onmouseout=function(){
timer=setInterval(function(){
iCur++;
if(iCur>=aLi.length){
iCur=0
}
for(var i=0;i<aLi.length;i++){
startMove(aLi[i],{opacity:0})
aA[i].style.background="aqua"
}
startMove(aLi[iCur],{opacity:100})
aA[iCur].style.background="red"
},2000)
btn.style.display="none"
}
for(var j=0;j<aA.length;j++){
aA[j].index=j
aA[j].onclick=function(){
iCur=this.index
if(iCur>=aLi.length){
iCur=0
}
for(var i=0;i<aLi.length;i++){
startMove(aLi[i],{opacity:0})
aA[i].style.background="aqua"
}
startMove(aLi[iCur],{opacity:100})
aA[iCur].style.background="red"
}
}
left.onclick=function(){
iCur--;
if(iCur<0){
iCur=aLi.length-1
}
for(var i=0;i<aLi.length;i++){
startMove(aLi[i],{opacity:0})
aA[i].style.background="aqua"
}
startMove(aLi[iCur],{opacity:100})
aA[iCur].style.background="red"
}
right.onclick=function(){
iCur++;
if(iCur>=aLi.length){
iCur=0
}
for(var i=0;i<aLi.length;i++){
startMove(aLi[i],{opacity:0})
aA[i].style.background="aqua"
}
startMove(aLi[iCur],{opacity:100})
aA[iCur].style.background="red"
}
}
</script>
</head>
<body>
<div id="box">
<ul id="picture">
<li class="show"><img src="img/1.jpg" /> </li>
<li><img src="img/2.jpg" /> </li>
<li><img src="img/3.jpg" /> </li>
<li><img src="img/4.jpg" /> </li>
<li><img src="img/5.jpg" /> </li>
<li><img src="img/6.jpg" /> </li>
</ul>
<div id="list">
<a class="coloe" href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</div>
<div id="btn">
<a id="left" href="#"><</a><a id="right" href="#">></a>
</div>
</div>
</body>
</html>