swipejs的使用

    <div id='slider' class='swipe'>

      <div class="swipe-wrap">

        <div><img src="data:image/img2.jpg"  /></div>

        <div><img src="data:image/img2.jpg"  /></div>

        <div><img src="data: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:; }

.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); }