索引值匹配图片切换

最新推荐文章于 2021-01-26 23:17:21 发布

znoes

最新推荐文章于 2021-01-26 23:17:21 发布

阅读量316

点赞数

分类专栏： js 文章标签：函数 JS

本文链接：https://blog.csdn.net/znoes/article/details/51030479

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>