<style type="text/css">
.div1{width: 660px;overflow: hidden;margin: 60px auto;position: relative;}
.div2{width: 10000px;position: relative;}
.div2 img{float: left;width: 660px;}
.div3{position:absolute;bottom:10px;left:50%;margin-left: -50px;}
.div3 span{float: left;width:10px;height:10px;margin-right: 10px;border-radius: 50%;background: rgba(0,0,0,0.1);}
.clearFix:after{content: "";display: block;clear:both;}
.div4 span{color: #fff;height: 24px;width: 16px;background:rgba(0,0,0,0.4);text-align: center;}
.div4 .span1{position:absolute;top:50%;left: 10px;margin-top: -12px;}
.div4 .span2{position:absolute;top:50%;right: 10px;margin-top: -12px;}
.div3 .on{background: rgba(0,0,0,0.3);}
</style>
<body>
<div class="div1">
<div class="div2 clearFix">
<img src="images/title_page1.jpg" alt="">
<img src="images/title_page2.jpg" alt="">
<img src="images/title_page3.jpg" alt="">
<img src="images/title_page4.jpg" alt="">
<img src="images/title_page5.jpg" alt="">
</div>
<div class="div3 clearFix">
<span class="on"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="div4">
<span class="span1"><</span>
<span class="span2">></span>
</div>
</div>
<script type="text/javascript">
var num=0;
$('.div3 span').click(function() {
num = $(this).index();
common(num);
})
function common(num){
$('.div3 span').removeClass("on");
$('.div3 span').eq(num).addClass('on');
$('.div2').animate({
left:-num*660
});
}
$('.span1').click(function(){
num--;
if(num == -1){
num = $('.div3 span').length-1;
}
common(num);
})
$('.span2').click(function(){
num++;
if(num == $('.div3 span').length){
num = 0;
}
common(num);
})
</script>
</body>
浙公网安备 33010602011771号