swipejs的使用

浏览数：56 / 时间：2015年06月09日

  <header>
    <h1>悦美</h1>
    <i class="header-right"></i>
  </header>
  <section>
    <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>
  </section>
</body>
<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); }