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