zoukankan      html  css  js  c++  java
  • 大图轮播

      今天我们学习了大图轮播,其代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    *{
    margin: 0px;
    padding: 0px;
    }
    #stage{
    300px;
    height: 200px;
    border: 10px solid black;
    margin: 300px;
    position: relative;
    overflow: hidden;
    }
    #ad-banner{
    1500px;
    height: 200px;
    background-color: brown;
    position: relative;
    z-index: 980;
    /*margin-left: -300px;*/
    }
    .ad{
    position: relative;
    300px;
    height: 200px;
    float: left;
    color: white;
    font-size: 100px;
    text-align: center;
    line-height: 200px;
    z-index: 990;
    }
    #btn-left,#btn-right{
    20px;
    height: 30px;
    position: absolute;
    top: 85px;
    background-color: black;
    z-index: 999;
    color: white;
    opacity: 0.5;
    text-align: center;
    line-height: 30px;
    font-size: 15px;
    font-weight: bold;
    }
    #btn-left{
    left: 0px;
    }
    #btn-right{
    right: 0px;
    }

    #btn-left:hover,#btn-right:hover{
    opacity: 0.8;
    cursor: pointer;
    }
    </style>
    </head>
    <body>
    <div id="stage">

    <div id="btn-right" onclick="moveLeftclick()">></div>
    <div id="btn-left" onclick="moveRightclick()"><</div>
    <div id="ad-banner">
    <div class="ad" style="background-color: hotpink;">1</div>
    <div class="ad" style="background-color: darkcyan">2</div>
    <div class="ad" style="background-color: coral">3</div>
    <div class="ad" style="background-color: #4CAE4C">4</div>
    <div class="ad" style="background-color: blueviolet">5</div>
    </div>
    </div>
    </body>
    </html>
    <script>
    var ad_banner = document.getElementById("ad-banner");
    var arr = [];
    var count = 1;
    function moveLeftclick(){
    if(count == 5){
    return false;
    }else{
    arr.push(window.setInterval("moveLeft()",20));
    }
    }

    function moveLeft(){
    ad_banner.style.marginLeft = ad_banner.offsetLeft - 10 + "px";
    if(ad_banner.offsetLeft == -300 * count)
    {
    for(var x in arr){
    window.clearInterval(arr[x]);
    }
    count++;
    }
    }
    function moveRightclick() {
    if (count == 1) {
    return false;
    } else {
    arr.push(window.setInterval(moveRight, 20));
    }

    }

    function moveRight() {
    ad_banner.style.marginLeft = ad_banner.offsetLeft + 10 + "px";
    if (ad_banner.offsetLeft == -300 * (count - 2)) {
    for (var x in arr) {
    window.clearInterval(arr[x]);
    }
    count--;
    }

    }


    window.setInterval("moveLeftclick()",5000);
    </script>

  • 相关阅读:
    JOISC2017 手持ち花火 (Sparklers) 题解
    Codeforces 1427E. Xum 题解
    AGC027D
    Codeforces 1416F. Showing Off 题解
    AGC032F
    AGC019E
    TCP实验(前言)
    OS第一次实验截图
    第12组 Beta (2/6)(丁泽中)
    第12组 Beta (1/6)(丁泽中)
  • 原文地址:https://www.cnblogs.com/yujiamin123/p/6952153.html
Copyright © 2011-2022 走看看