索引值匹配图片切换

来源：互联网发布：非农历史数据统计分析编辑：程序博客网时间：2024/06/03 23:08
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        *{            margin:0;            padding:0;        }        #wrap{            width:660px;            height:370px;            margin:100px auto 0;            /*border:1px dashed red;*/            position:relative;            background:url('images/bg.gif')            no-repeat -69px -510px;        }        #wrap span,#wrap p{            width:100%;            height:35px;            line-height:35px;            text-align:center;            font-size:16px;            color:#fff;            background:rgba(0,0,0,0.5);            position:absolute;            left:0;        }        #wrap span{            top:0;        }        #wrap p{            bottom:0;        }        #wrap ul{            width:270px;            height:35px;            position:absolute;            bottom:-50px;            left:25%;        }        #wrap ul li{            list-style:none;            float:left;            width:35px;            height:35px;            margin-right:10px;            background:red;        }        #wrap ul li.active{            background:green;        }    </style>    <script type="text/javascript">        window.onload = function(){            var oDiv = document.getElementById('wrap');            var oUl = oDiv.getElementsByTagName('ul')[0];            var aLi = oUl.getElementsByTagName('li');         var oPic = oDiv.getElementsByTagName('img')[0];         var oSpan = oDiv.getElementsByTagName('span')[0];         var oP = oDiv.getElementsByTagName('p')[0];         var beforeLi = null;                  //创建 数组         var arrPic = ['images/1.jpg','images/2.jpg','images/3.jpg',                    'images/4.jpg','images/5.jpg','images/6.jpeg'];         var arrTex = ['大雁往南飞','青山绿水倒影','盘山的平原',                    '美丽的一朵紫色花','触立的山峰','北极的阳光'];         //创建一个数字为0开始；         var num = 0;                  //图片加载初始化         fnTab();         function fnTab(){               oPic.src = arrPic[num];            //oSpan.innerHTML = '1/4';            //转换成动态写法             oSpan.innerHTML = 1 + num + '/' + arrTex.length;            oP.innerHTML = arrTex[num];                     };                           //生成按钮            for(var i=0;i<arrTex.length;i++){                oUl.innerHTML += '<li></li>';                aLi[0].className = 'active';                beforeLi = aLi[num];            };                        //给每个按钮点击事件            for(var i=0;i<aLi.length;i++){               aLi[i].index = i;               //aLi[i].className = '';               aLi[i].onclick = function(){                  //alert(this.index);                  //this.className = 'active';                  num = this.index;                  /*oPic.src = arrPic[this.index];                  oSpan.innerHTML = 1 + this.index + '/' + arrTex.length;                  oP.innerHTML = arrTex[this.index];*/                  fnTab();                                    /*//全部清空，当前添加                   for(var i=0;i<aLi.length;i++){                     aLi[i].className = '';                  };                                    this.className = 'active';                  */                  //清空上一个，当前添加                  for(var i=0;i<aLi.length;i++){                     beforeLi.className = '';                     beforeLi = this;                     this.className = 'active';                  };               };            };        };    </script></head><body>    <div id="wrap">        <img src="" width="660" height="370" alt="" />        <span>图片数量正在计算中......</span>        <p>图片说明正在加载中......</p>        <ul></ul>    </div></body></html>
0 0