页面代码:
<div id="flashs">
<article>
<div class="scroll relative">
<div class="scroll_box" id="scroll_img">
<ul class="scroll_wrap">
<li>
<a href="">
<img src="images/01.jpg" width="100%;">
</a>
</li>
<li>
<a href="">
<img src="images/02.jpg" width="100%;">
</a>
</li>
<li>
<a href="">
<img src="images/03.jpg" width="100%;">
</a>
</li>
</ul>
</div>
<span class="scroll_position_bg opacity6" style="width:56px;"></span>
<ul class="scroll_position" id="scroll_position">
<li class="on">
<a href="javascript:void(0);">1</a>
</li>
<li>
<a href="javascript:void(0);">2</a>
</li>
<li>
<a href="javascript:void(0);">3</a>
</li>
</ul>
</div>
</article>
</div>
<script src='js/hhSwipe.js'></script>
<script>
var slider = Swipe(document.getElementById('scroll_img'), {
auto: 3000,
continuous: true,
callback: function(pos) {
var i = bullets.length;
while (i--) {
bullets[i].className = ' ';
}
bullets[pos].className = 'on';
}
});
var bullets =
document.getElementById('scroll_position').getElementsByTagName('li');
$(function(){
$('.scroll_position_bg').css({
width:$('#scroll_position').width()
});
});
</script>
样式layout.css:
.relative{
position:relative;
left:0;
top:0;
}
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix{
zoom:1;
}
.opacity6{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* ie8 */filter:alpha(opacity=60); /* ie5-7 */opacity:0.6;/* css standard, currently it works in most modern browsers */
}
/*public scroll*/
.scroll{
margin: 0px auto;
max-width: 100%;
}
.scroll_box{
overflow: hidden;
visibility: hidden;
position: relative;
}
.scroll_wrap{
overflow: hidden;
position: relative;
}
.scroll_wrap li{
position: relative;
display: block;
width: 100%;
float: left;
}
.scroll_wrap li a{
display: block;
margin:0px auto;
position: relative;
}
.scroll_position{
position: absolute;
left: 45%;
z-index: 400px;
bottom: 14px;
}
.scroll_position li{
display: inline-block;
width: 16px;
height: 16px;
border-radius: 10px;
background: #fff;
}
.scroll_position li a{
font-size: 0;
}
.scroll_position li.on{
background-color: #ffd800;
}
.scroll_position_bg{
background:#000;
position: absolute;
bottom:9px;
left: 44%;
padding:0px 15px;
z-index: 380px;
height: 26px;
border-radius:26px;
}