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>

  • 相关阅读:
    button label textfield对齐 textview UI样式
    iOS真机测试
    Android学习
    CoreMontion加速计
    一些用xib加载主界面的过程
    英特尔公司
    CISC和RISC
    Terminating app due to uncaught exception 'NSGenericException' 类崩溃文章收集
    UICollectionView 介绍 <转>
    流媒件应用FreeStreamer 学习2
  • 原文地址:https://www.cnblogs.com/chenshanhe/p/6654703.html
Copyright © 2011-2022 走看看