基于响应式的首页大图效果

页面代码：

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