zoukankan      html  css  js  c++  java
  • swipejs的使用

        <div id='slider' class='swipe'>
          <div class="swipe-wrap">
            <div><img src="image/img2.jpg"  /></div>
            <div><img src="image/img2.jpg"  /></div>
            <div><img src="image/img2.jpg"  /></div>
          </div>
          <span id="position">
    
          </span>
          <a href="#" id="prev" onclick="slider.prev();return false;"></a>
          <a href="#" id="next" onclick="slider.next();return false;"></a>
        </div>
    
    
    <script src="js/swipe.js"></script>
    <script>
      var _position = document.getElementById("position");
      var slider = new Swipe(document.getElementById('slider'), {
            callback: function() {
              //    当前位置
              pos = slider.getPos();
    
              for(var n = 0;n < slider.getNumSlides();n++){
                bullets[n].className = '';
              }
              bullets[pos].className = 'on';
            }
          });
          //    获取div个数
          for (var n = 0;n < slider.getNumSlides();n++){
            var e = document.createElement("em");
            _position.appendChild(e);
    
          }
           _position.getElementsByTagName("em")[0].className = "on";
          bullets = document.getElementById('position').getElementsByTagName('em');
    </script>
    .swipe { margin:auto; position:relative; overflow:hidden; visibility: hidden;}
    .swipe-wrap {  overflow: hidden;  position: relative;  }
    .swipe .swipe-wrap > div { position:relative; overflow:hidden;float:left; width:100%; }
    .swipe, .swipe .swipe-wrap,.swipe, .swipe .swipe-wrap > div,.swipe, .swipe .swipe-wrap > div img{ width:100%; height:130px; }
    
    .swipe #position { position:absolute; bottom:8px; left: 50%;-webkit-transform: translate(-50%) }
    .swipe #position em { display: inline-block; width:8px; height:8px; margin:0 4px; text-indent:-9999px; background:#fff; border-radius:6px; overflow:hidden; border: 2px solid white;}
    .swipe #position em.on { background: transparent; }
    
    .swipe a#prev, .swipe a#next { display:block; height:34px; width:34px; color:#444; text-decoration:none; position: absolute; top:45px; z-index:1; }
    .swipe a#prev { left:0px; }
    .swipe a#next { right:0px; }
    .swipe a#prev:after, .swipe a#next:after { content:''; top:37%; position: absolute; width:7px; height:7px; border-color:#fff; border-style:solid; border-width:0 2px 2px 0; }
    .swipe a#prev:after { left:15px; -webkit-transform:rotate(135deg); -moz-transform:rotate(135deg); -o-transform:rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); }
    .swipe a#next:after { right:15px; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }



  • 相关阅读:
    ovs tag
    从数据库分析OpenStack创建虚机流程
    Neutron中的二层网络服务架构
    Failed to bind port
    OpenStack网络参数segment
    OpenStack与SDN控制器的集成
    HDU 3709 Balanced Number
    HDU 5787 K-wolf Number
    HDU 5803 Zhu’s Math Problem
    CodeForces 258B Little Elephant and Elections
  • 原文地址:https://www.cnblogs.com/sussski/p/4218973.html
Copyright © 2011-2022 走看看