大图轮换看这里主要分为html+css+js这三个内容去实现
页面样式:
<div class="banner">
<div class="banner_container">
<div id="slides">
<div class="slides_container">
<div>
<a href="#" title="广场介绍"><img src="__PUBLIC__/home/img/travel_1.jpg" alt="Slide 1"></a>
</div>
<div>
<a href="#" title="广场介绍" ><img src="__PUBLIC__/home/img/travel_2.jpg" alt="Slide 2"></a>
</div>
<div>
<a href="#" title="广场介绍"><img src="__PUBLIC__/home/img/travel_3.jpg" alt="Slide 3"></a>
</div>
</div>
</div>
</div>
</div>
css设置
这里多个框避免了会影响上级的元素;
关于定位方面下次再来;
.banner{
width: 470px;
height: 380px;
margin: 10px 0 0 0;
z-index:1;
border:1px solid #e2e2e2;
border-radius: 5px;
}
.banner_container{
width: 450px;
height: 340px;
margin: 0 auto;
padding: 5px;
position: relative;
/*box-shadow:0 0 30px #2E2C32;*/
}
#slides {
position: absolute;
z-index: 100;
}
.slides_container {
width:450px;
height:350px;
}
.slides_container img{
width:448px;
height:350px;
border:1px solid #f7f7f7;
}
.pagination{
margin:10px auto;
width: 84px;/*7*12=84px*/
}
.pagination li{
float: left;
}
.pagination li a {
display: block;
z-index: 102;
width: 12px;
height: 0;
margin: 0 auto;
padding-top: 12px;
background-image: url(../img/pagination.png);
background-position: 0 0;
float: left;
overflow: hidden;
}
.pagination li.current a{
background-position:0 -12px;
}
js效果
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: delayTime,
pause: 2500,
hoverPause: true,
animationStart: function(){
$('.caption').animate({
bottom:-35
},100);
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
if (window.console && console.log) {
// example return of current slide number
console.log(current);
}
}
});