• 轮播


    <!DOCTYPE html>
    <html>

        <head>
            <meta charset="utf-8" />
            <title>轮播</title>
            <style type="text/css">
                .lb {
                     300px;
                    height: 200px;
                    margin: 10px auto;
                    
                }
                
                #left-arrow {
                    position: relative;
                    display: inline-block;
                    top: -130px;
                   left: -10px;
                    z-index: 999;
                    cursor: pointer;
                }
                
                #right-arrow {
                    position: relative;
                    display: inline-block;
                    top: -130px;
                    right: -215px;
                    z-index: 999;
                    cursor: pointer;
                }
                
                #num-btn span {
                    display: inline-block;
                    font-size: 20px;
                     23.2px;
                    font-family: arial;
                    text-align: center;
                    border-radius: 50%;
                    color: #fff;
                    cursor: pointer;
                    margin-left: 9px;
                    position: relative;
                    bottom: 80px;
                }
                
                #num-btn {
                    top: -150px;
                    left: 35%;
                    
                }
                #img{
                     300px;
                    height: 200px;
                    position: relative;
                }
            </style>
        </head>

        <body>
            <div class="lb">
                <img src="img/1.jpg" id="img" />
                <img src="img/btn_l.png" id="left-arrow" />
                <img src="img/btn_r.png" id="right-arrow" />
                <div id="num-btn">
                    <span style="background: #f00;">1</span>
                    <span style="background: #000000;">2</span>
                    <span style="background: #000000;">3</span>
                    <span style="background: #000000;">4</span>
                    <span style="background: #000000;">5</span>
                    <span style="background: #000000;">6</span>
                    <span style="background: #000000;">7</span>
                    <span style="background: #000000;">8</span>
                </div>
            </div>
            <script type="text/javascript">
                var left = document.getElementById("left-arrow");
                var right = document.getElementById("right-arrow");
                var img = document.getElementById("img");
                var index = 1;
                var btns = getChildren("num-btn","span");
                function getChildren (id,tagname) {
                    var arr=document.getElementById(id).childNodes;
                    var ele=[];
                    for(var i=0;i<arr.length;i++){
                        if(arr[i].tagName==tagname.toUpperCase()){
                            ele.push(arr[i]);
                        }
                    }
                    return ele;
                }    
                //让数字匹配图片
                for(var i = 0; i < btns.length; i++) {
                    btns[i].onclick = (function() {
                        var j = i + 1;
                        return function() {
                            index = j;
                            img.src = "img/" + index + ".jpg"
                            changebg();
                        }
                    })();
                }
                function changebg() {
                    for(var i = 0; i < btns.length; i++) {
                        btns[i].style.background = "#000";
                    }
                    btns[index - 1].style.background = "#f00";
                }
                var moveLeft = function() {
                    index++;
                    if(index > 8) index = 1;
                    img.src = "img/" + index + ".jpg"
                    changebg();
                }
                right.onclick = moveLeft;
                left.onclick = function() {
                    index--;
                    if(index < 1) index = 8;
                    img.src = "img/" + index + ".jpg";
                    changebg();
                }
                var timer = setInterval(moveLeft, 1000);
                var lb = document.getElementsByClassName("lb")[0];
                lb.onmouseover = function() {
                    clearInterval(timer);
                };
                lb.onmouseout = function() {
                    timer = setInterval(moveLeft, 1000);
                }
            </script>
        </body>

    </html>

  • 相关阅读:
    How to resolve mysql problem when you get code 2003(10061) and 1130
    Windows connect to mysql failed: can't get hostname for your address
    Python基础教程总结(二)
    Python基础教程总结(一)
    Begin to study Deep Learning
    再坚持一点点
    技术到管理的必经之路(2)
    技术到管理的必经之路(1)
    c#进阶(7)—— 异步编程基础(async 和 await 关键字)
    c#进阶(6)—— 网络通信基础知识
  • 原文地址:https://www.cnblogs.com/zhouguoshuai/p/8145295.html
Copyright © 2020-2023  润新知