标签：
<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); }
标签：
原文地址：http://www.cnblogs.com/sussski/p/4218973.html
