js实现左右点击图片层叠滚动特效

需要加载js有

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript" src="js/jquery.roundabout.js"></script>
<script type="text/javascript" src="js/jquery.roundabout-shapes.js"></script>

jquery.corner.js

jquery.roundabout.js

jquery.roundabout-shapes

　　

#gla{
margin:0 auto;
position:relative;
background:url(../img/gla_bac.png);
height:409px;
overflow:hidden;
}
#gla_box{
width:700px;
margin:auto;
position:relative;}
#gla_box .prev,#gla_box .next{
display:block;
z-index:100;
overflow:hidden;
cursor:pointer;
position:absolute;
width:52px;
height:47px;
top:171px;
}
#gla_box .prev{
background:url(../img/btn.png) left bottom no-repeat;
left:300px;
top:350px;
}
#gla_box .next{
background:url(../img/btn.png) right bottom no-repeat;
right:300px;
top:350px;
}


.gla_inbox{
overflow:hidden;
position:relative;
}
.gla_inbox p{
text-indent:1em;
font-size:14px;
width:100%;
color:#FFFFFF;
line-height:30px;
background:#000000;
}
.gla_inbox a{
padding:5px;
display:block;
position:absolute;
top:220px;
left:90px;
background:#0066CC;
color:#FFF;
}
.gla_inbox img{
width:100%;
height:100%;}

 

<div id="gla">
                <div id="gla_box">
                    <span class="prev">&nbsp;</span>
                    <span class="next">&nbsp;</span>
                    <ul>
                        <li>
                            <div class="gla_inbox">
                                
                                <img src="img/20120814204816.jpg" />
                                
                            </div>
                        </li>
                        <li>
                            <div class="gla_inbox">
                                
                                <img src="img/20120814204750.jpg" />
                                
                            </div>
                        </li>
                        <li>
                            <div class="gla_inbox">
                                
                                <img src="img/20120814204733.jpg" />
                                
                            </div>
                        </li>
                        <li>
                            <div class="gla_inbox">
                                
                                <img src="img/20120814204711.jpg" />
                                
                            </div>
                        </li>
                        <li>
                            <div class="gla_inbox">
                                
                                <img src="img/20120814204658.jpg" />
                                
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

<script type="text/javascript">
$(function(){
           
    $('.gla_inbox').corner('8px');
    
    $('#gla_box>ul').roundabout({
        minOpacity:1,
        btnNext: ".next",
        duration: 1000,
        reflect: true,
        btnPrev: '.prev',
        autoplay:true,
        autoplayDuration:5000,
        tilt:0,
        shape: 'figure8'
    });
    
});
</script>