JavaScript图片切换实现

最新推荐文章于 2024-06-27 12:49:37 发布

巴依尔13

最新推荐文章于 2024-06-27 12:49:37 发布

阅读量640

点赞数

分类专栏：前端开发文章标签： javascript

本文链接：https://blog.csdn.net/wds207207/article/details/65446206

版权

前端开发专栏收录该内容

20 篇文章 0 订阅

订阅专栏

效果图

html代码

    <div id="pic">
        <img src="" alt="" />
        <p>正在加载中...</p>
        <span>数量正在加载中...</span>
        <ul></ul>
    </div>

CSS代码

        ul, p {
            margin: 0;
            padding: 0;
        }
        body{
            background: #333;
        }
        li{
            list-style: none;
            width: 40px;
            height: 40px;
            margin-bottom: 10px;
            background: #000;
        }
        .active{
            background: #c6f6f6;
        }
        #pic{
            width: 390px;
            height: 480px;
            margin: 30px auto 0;
            background: #fff url(img/img/loader_ico.gif) no-repeat center;
            position: relative;
        }
        ul{
            position: absolute;
            top: 10px;
            left: 400px;
        }
        img{
            width: 390px;
            height: 480px;

        }
        p, span{
            width: 390px;
            font-size: 16px;
            line-height: 20px;
            color: #fff;
            text-align: center;
            background: #000;
            filter: (opacity: 60);
            opacity: 0.6;
            position: absolute;
            left: 0;
        }
        p{
            bottom: 0;
        }
        span{
            top: 0;
        }

JavaScript代码

    window.onload = function (){                                // 要是写上面 就要写上window.onload 
                                                                //不然他妈的读不到下面的数据啊
        var oDiv = document.getElementById('pic');
        var oImg = oDiv.getElementsByTagName('img')[0];
        var oP = oDiv.getElementsByTagName('p')[0];
        var oSpan = oDiv.getElementsByTagName('span')[0];
        var oUl = oDiv.getElementsByTagName('ul')[0];
        var aLi = oDiv.getElementsByTagName('li');
        var arrUrl = ['img/img/1.png','img/img/2.png','img/img/3.png','img/img/4.png'];
        var arrText = ['Image 1','Image 2','Image 3','Image 4'];
        var num = 0;
        var oldLi = null;
        /*  初始化  */
        oSpan.innerHTML = 1 + num + '/' + arrUrl.length;
        oP.innerHTML = arrText[num];
        oImg.src = arrUrl[num];
        for(var i=0; i<arrUrl.length; i++){   //添加四个元素  多个元素就要用for循环
            oUl.innerHTML += '<li></li>';           
        }
        oldLi = aLi[0];
        aLi[num].className = 'active';
        /*  初始化完成   */
        for(var i=0; i<aLi.length; i++){
            aLi[i].index = i;
            aLi[i].onclick = function (){
                oImg.src = arrUrl[this.index];
                oP.innerHTML = arrText[this.index];
                oSpan.innerHTML = 1 + this.index + '/' + arrUrl.length;
                oldLi.className = '';
                oldLi = this;
                this.className = 'active';
            };
        }
    };