js渐隐渐现透明度变化淡入淡出轮播图

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="#">&lt;</a><a id="right" href="#">&gt;</a>
            </div>
        </div>
    </body>
</html>