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>