首页 > 代码库 > 图片切换示例

图片切换示例

2024-09-26 05:01:02   214人阅读

技术分享 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            ul {
                padding: 0;
                margin: 0;
            }
            
            li {
                list-style: none;
            }
            
            body {
                background: #333;
            }
            
            #pic {
                width: 400px;
                height: 500px;
                position: relative;
                margin: 0 auto;
                background: url(img/loader_ico.gif) no-repeat center #fff;
            }
            
            #pic img {
                width: 400px;
                height: 500px;
            }
            
            #pic ul {
                width: 40px;
                position: absolute;
                top: 0;
                right: -50px;
            }
            
            #pic li {
                width: 40px;
                height: 40px;
                margin-bottom: 4px;
                background: #666;
            }
            
            #pic .active {
                background: #FC3;
            }
            
            #pic span {
                top: 0;
            }
            
            #pic p {
                bottom: 0;
                margin: 0;
            }
            
            #pic p,
            #pic span {
                position: absolute;
                left: 0;
                width: 400px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                color: #fff;
                background: #000;
            }
        </style>
        <script>
            window.onload = function() {
                var oDiv = document.getElementById(‘pic‘);
                var oImg = oDiv.getElementsByTagName(‘img‘)[0];
                var oSpan = oDiv.getElementsByTagName(‘span‘)[0];
                var oP = oDiv.getElementsByTagName(‘p‘)[0];
                var oUl = oDiv.getElementsByTagName(‘ul‘)[0];
                var aLi = oUl.getElementsByTagName(‘li‘);

                var arrUrl = [‘img/1.png‘, ‘img/2.png‘, ‘img/3.png‘, ‘img/4.png‘];
                var arrText = [‘小宠物‘, ‘图片二‘, ‘图片三‘, ‘面具‘];
                var num = 0;

                for(var i = 0; i < arrUrl.length; i++) {
                    oUl.innerHTML += ‘<li></li>‘;
                }

                // 初始化
                function fnTab() {
                    oImg.src = arrUrl[num];
                    oSpan.innerHTML = 1 + num + ‘ / ‘ + arrUrl.length;
                    oP.innerHTML = arrText[num];
                    for(var i = 0; i < aLi.length; i++) {
                        aLi[i].className = ‘‘;
                    }
                    aLi[num].className = ‘active‘;
                }
                fnTab();

                for(var i = 0; i < aLi.length; i++) {
                    aLi[i].index = i; // 索引值
                    aLi[i].onclick = function() {
                        num = this.index;
                        fnTab();
                    };
                }
            };
        </script>
    </head>

    <body>
        <div id="pic">
            <img src="" />
            <span>数量正在加载中……</span>
            <p>文字说明正在加载中……</p>
            <ul></ul>
        </div>
    </body>

</html>
示例代码

 

图片切换示例


联系
我们