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

     #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-left"><</div>
    <div id="btn-right" onclick="moveLeftclick()">></div>
    <div id="ad-banner">
    <div class="ad" style="hotpink;">1</div>
    <div class="ad" style="darkcyan">2</div>
    <div class="ad" style="coral">3</div>
    <div class="ad" style="#4CAE4C">4</div>
    <div class="ad" style="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++;
    }
    }

    window.setInterval("moveLeftclick()",5000);
    </script>
  • 相关阅读:
    画册制作须知
    名片设计尺寸及名片设计的注意事项
    鼠标指到图片上会向上移动
    css3 实现鼠标放到一个div上显示出另一个隐藏的div
    React Native的原生路由
    React中input checked的使用
    Webpack打包React踩到的坑
    Linux下git的配置
    js变量提升的一个小坑
    SpringMVC中传入的对象存放在哪里
  • 原文地址:https://www.cnblogs.com/niez1/p/6929882.html
Copyright © 2011-2022 走看看