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

    <html>

    <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    * {
    margin: 0px;
    padding: 0px;
    }

    .stage {
    300px;
    height: 200px;
    border: 10px solid black;
    margin: 50px;
    margin-left: 200px;
    overflow: hidden;
    position: relative;
    }

    .ad-banner {
    1500px;
    height: 200px;
    }

    .ad {
    300px;
    height: 200px;
    float: left;
    font-size: 50px;
    line-height: 200px;
    color: white;
    text-align: center;
    }

    .left-btn,
    .right-btn {
    height: 200px;
    20px;
    position: absolute;
    line-height: 200px;
    background-color: gray;
    opacity: 0.5;
    font-size: 20px;
    text-align: center;
    }

    .left-btn {
    left: 0px;
    top: 0px;
    }

    .right-btn {
    right: 0px;
    top: 0px;
    }

    .left-btn:hover,
    .right-btn:hover {
    cursor: pointer;
    opacity: 0.8;
    }
    </style>
    </head>

    <body>
    <div class="stage">
    <div class="left-btn">
    <</div>
    <div class="right-btn">></div>
    <div class="ad-banner">
    <div class="ad" style="background-color: green;">1</div>
    <div class="ad" style="background-color: royalblue;">2</div>
    <div class="ad" style="background-color: red;">3</div>
    <div class="ad" style="background-color: yellow;">4</div>
    <div class="ad" style="background-color: gray;">5</div>
    </div>
    </div>
    </body>

    </html>
    <script>
    var speed = 10;
    var count = 1;
    var arr = Array();
    document.getElementsByClassName("right-btn")[0].onclick = function() {
    arr.push(window.setInterval(moveToLeft, 10));
    }
    function moveToLeft() {
    var banner = document.getElementsByClassName("ad-banner")[0];
    if(banner.offsetLeft > count * (-300)&&count<5) {
    banner.style.marginLeft = banner.offsetLeft - speed + "px";
    } else {
    if(count<5)
    {count++;}
    for(var i in arr) {
    window.clearInterval(arr[i]);
    }
    }
    }
    document.getElementsByClassName("left-btn")[0].onclick = function() {
    arr.push(window.setInterval(moveToRight, 10));
    }
    function moveToRight() {
    var banner = document.getElementsByClassName("ad-banner")[0];
    if(banner.offsetLeft < (count-2) * (-300)&&count>1) {
    banner.style.marginLeft = banner.offsetLeft + speed + "px";
    } else {
    if(count>1)
    {count--;}
    for(var i in arr) {
    window.clearInterval(arr[i]);
    }
    }
    }
    </script>

  • 相关阅读:
    java JSONObject
    android 8.0 悬浮窗 最简demo
    使用adb 命令(atrace)抓起systrace的方法。
    使用python处理selenium中的获取元素属性
    使用adb/Linux获取网关ip
    Requests text乱码
    python-uiautomator2
    adb命令 判断锁屏
    缓存穿透、缓存击穿与缓存雪崩
    ReentrantLock重入锁详解
  • 原文地址:https://www.cnblogs.com/chenshanhe/p/6654703.html
Copyright © 2011-2022 走看看