简单易懂实用的大图轮播

Posted 2020-08-29 周全

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单易懂实用的大图轮播相关的知识，希望对你有一定的参考价值。

  <head>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>大图轮播</title>
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }
            
            #container {
                width: 500px;
                height: 300px;
                /*border: 1px solid black;*/
                position: relative;
                overflow: hidden;
            }
            
            .btn {
                height: 100%;
                width: 30px;
                /*border: 1px solid red;*/
                position: absolute;
                text-align: center;
                line-height: 300px;
                font-size: 40px;
                font-weight: 900;
                color: black;
                opacity: 0.3;
                transition: 0.6s;
                z-index: 999;
                background-color: white;
            }
            
            .btn:hover {
                cursor: pointer;
                opacity: 0.8;
            }
            
            #left-btn {
                left: 0px;
                top: 0px;
            }
            
            #right-btn {
                right: 0px;
                top: 0px;
            }
            
            #ad-container {
                width: 2500px;
                height: 300px;
                /*border: 1px solid blue;*/
                position: relative;
            }
            
            .ad {
                width: 500px;
                height: 300px;
                float: left;
                text-align: center;
                line-height: 300px;
                font-size: 100px;
                font-family: "微软雅黑";
            }
        </style>
    </head>

    <body>
        <div id="container">
            <div id="left-btn" class="btn">
                <</div>
                    <div id="right-btn" class="btn">></div>
                    <div id="ad-container">
                        <div class="ad" style="">1</div>
                        <div class="ad" style="">2</div>
                        <div class="ad" style="">3</div>
                        <div class="ad" style="">4</div>
                        <div class="ad" style="">5</div>
                    </div>
            </div>
    </body>

</html>
<script type="text/javascript">
    var rightBtn = document.getElementById("right-btn");
    var leftBtn = document.getElementById("left-btn");
    var n = 1;
/*    var count = 1*/;
    var arr = new Array();
/*    var m=1;
*/    rightBtn.onclick = function() {
        var x = window.setInterval("to_right()", 20);
        arr.push(x);
    }

    function clear() {
        for(var i in arr) {
            window.clearInterval(arr[i]);
        }
    }

    function to_right() {

        var adContainer = document.getElementById("ad-container");
        if(n == 5) {
            clear();
        } else if(adContainer.offsetLeft != n * (-500)) {
            adContainer.style.marginLeft = adContainer.offsetLeft - 25 + "px";
        } else {
            n++;
            clear();
        }
    }
    var arr1 = new Array();

    leftBtn.onclick = function() {
        var y = window.setInterval("to_left()", 20);
        arr1.push(y);
    }

    function clear2() {
        for(var y in arr1) {
            window.clearInterval(arr1[y]);
        }
    }

    function to_left() {

        var adContainer = document.getElementById("ad-container");
        if(n == 1) {
            clear2();
        } else if(adContainer.offsetLeft != (n-2) * (-500)) {
            adContainer.style.marginLeft = adContainer.offsetLeft + 25 + "px";
        } else {
            n--;
            clear2();
        }
    }

    
</script>

以上是关于简单易懂实用的大图轮播的主要内容，如果未能解决你的问题，请参考以下文章