简单易懂实用的大图轮播

2018-06-24 00:55:14来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:canvas粒子时钟

下一篇:canvas贝塞尔曲线效果演示