一、效果图
二、原理
div > u > li > a > img,布局的时候让li的位置重叠,如果不设置z-index(值大的先显示),会显示后面的li。
所有li都有一个基础的class名,设置着基本的相关样式,属性z-index定义一个值。
再定义第二个class名,设置好新的css样式,属性z-index定义一个更大的值。
用js给li添加、移除第二个class,来实现切换当前图片的展示。
左右按钮和小圆点都添加点击事件。
添加定时器,每隔一段时间执行点击向右按钮操作,即显示下一个图片。
三、实现:
<div class="banbox">
<div id="banner">
<ul class="slide">
<li class="slide-item active" data-index="0">
<a href="#"><img src="../img/banner1.png" /></a>
</li>
<li class="slide-item" data-index="1">
<a href="#"><img src="../img/banner2.png" /></a>
</li>
</ul>
<div class="ban_controls">
<div class="page prev" data-target="prev"></div>
<div class="page next" data-target="next"></div>
<ul class="page_list">
<li class="page_active active" data-index="0"></li>
<li class="page_active" data-index="1"></li>
</ul>
</div>
</div>
</div>
.banbox{
width: 68.5%;
float: left;
overflow: hidden;
margin-bottom: 20px;
border-radius: 3px;
position: relative;
}
#banner{
width: 100%;
height: 260px;
overflow: hidden;
}
#banner .slide{
z-index: 3;
opacity: 1;
width: 100%;
height: 100%;
}
#banner .slide li{
position: absolute;
top: 0;
z-index: 3;
opacity: 1;
width: 100%;
height: 100%;
}
#banner .slide li.active{
z-index: 4;
}
#banner .page_list li.active{
background: #12b7de;
}
#banner .prev,#banner .next{
position: absolute;
height: 32px;
width: 40px;
top: 50%;
left: 50px;
z-index: 4;
margin-top: -25px;
cursor: pointer;
opacity: 0;
transition: all 150ms;
}
#banner .prev{background: url(../img/page_prevt.png) no-repeat;}
#banner .next{
background: url(../img/page_next.png) no-repeat;
left: auto;
right: 50px;
}
#banner:hover .ban_controls .page.prev{
opacity: 7;
left:20px;
}
#banner:hover .ban_controls .page.next{
opacity: 7;
right:20px;
}
.page_list{
position: absolute;
width: 100%;
height: 26px;
padding: 0;
bottom: 0;
z-index: 4;
text-align: center;
}
#banner .page_list li{
border-radius: 10px;
background: #fff;
display: inline-block;
width: 10px;
height: 10px;
margin: 0 7px;
text-indent: -9999px;
opacity: .9;
cursor: pointer;
transition: all 150ms;
}
#banner .page_list li:hover{
opacity: 1;
background: #12b7de;
}