Use the list to lay out the banner picture, use absolute positioning to overlay the picture, use the display to hide the picture and display the first picture, use the positioning layout to switch buttons and control points;
HTML code:
<body>
<!-- banner -->
<div class="banner">
<ul class="bannerUl" id="bannerUl">
<li><a href="#"><img src="images/carousel01.png" alt=""><div class="content"><p>第一张图片</p></div></a></li>
<li><a href="#"><img src="images/carousel01.png" alt=""><div class="content"><p>第二张图片</p></div></a></li>
<li><a href="#"><img src="images/carousel01.png" alt=""><div class="content"><p>第三张图片</p></div></a></li>
<li><a href="#"><img src="images/carousel01.png" alt=""><div class="content"><p>第四张图片</p></div></a></li>
</ul>
<!-- 左右切换 -->
<a id="btnPrev" class="bannerBtn bannerPrev" href="javascript:void (0)"><img src="images/prev.png" alt=""></a>
<a id="btnNext" class="bannerBtn bannerNext" href="javascript:void (0)"><img src="images/next.png" alt=""></a>
<!-- 左右切换 end -->
<!-- 控制块 --> <!-- 利用JS遍历li生成控制点 -->
<div class="controls ctrl_bg" id="ctrls">
</div>
<!-- 控制块 end -->
</div>
<!-- banner end -->
</body>
Javascript code:
{
//获取页面id
let btnPrev = document.getElementById("btnPrev");
let btnNext = document.getElementById("btnNext");
let bannerUl = document.getElementById("bannerUl");
let ctrls = document.getElementById("ctrls");
let lis = bannerUl.children; //。找到所有的图片
let index = 0; //图片索引
/* 找所有的兄弟节点的函数 */
let findSiblings = function( tag ){
let child = tag.parentNode.children ; // 找到所有的 子标签，包括 tag
let siblings = [] ; // 空数组，存放兄弟们
for( let i=0 ; i <= child.length - 1 ; i++){
if( child[i] === tag ){
continue;
}
siblings.push( child[i] ); // 把兄弟放入数组中。给数组添加元素
}
return siblings ; // 返回兄弟节点
};
// 去掉兄弟标签的指定类
let removeSiblingClass = function( tag , classN ){
let siblings = findSiblings(tag);
for( let i = 0 ; i <= siblings.length-1 ; i++ ){
siblings[i].classList.remove( classN );
}
};
let showPic = function( index ){
// 让对应图片显示
lis[index].classList.add( "show" );
// 让其它图片隐藏
removeSiblingClass( lis[index] , "show" );
// 控制点的切换
dots[index].classList.add("on");
removeSiblingClass( dots[index] , "on" );
};
//动态生成span标签，生成控制点
for( let i = 0; i <= lis.length-1 ; i++ ){
let span = document.createElement("span");
ctrls.appendChild(span);
}
let dots = ctrls.children; //扎到所有的控制点
showPic( index ); // 默认显示索引为0的那一张
let goLeft = function( event ){
index--;
if( index < 0 ){
index = lis.length-1;
}
showPic( index ); // 显示图片
};
let goRight = function( event ){
index++;
if( index > lis.length - 1 ){
index = 0;
}
showPic( index ); // 显示图片
};
btnPrev.addEventListener("click",goLeft);
btnNext.addEventListener("click",goRight);
//控制点的点击事件，点击切换图片
for( let i =0 ; i <= dots.length-1 ; i++ ){
dots[i].addEventListener("click",function(){
index = i;
showPic( index );
})
}
}
CSS code:
.banner{
width: 1000px;
min-width: 760px;
height: 600px;
border:1px solid #333333;
position: relative;
}
.bannerUl,
.bannerUl>li,
.bannerUl>li>a{
width: 760px;
height: 340px;
}
.bannerUl>li>a{
display: block;
}
.bannerUl>li{
position: absolute;
top: 60px;
left: 120px;
display: none; /* 隐藏图片 */
overflow: hidden; /* 阻止内容超出 */
}
.bannerUl>.show{
display: block; /* 显示图片 */
animation: showAni 0.5s both; /* 使用动画 */
}
.content{
width: 100%;
height: 57px;
background-color: #77160a;
position: absolute;
bottom: 0;
animation: contAni 0.5s both;
}
.content>p{
color: #fff;
font-size: 18px;
line-height: 57px;
margin-left: 30px;
animation: pAni 0.3s 0.3s both;
}
.bannerBtn{
width: 69px;
height: 51px;
position: absolute;
top: 180px;
opacity: 0.3;
transition: opacity 0.3s;
}
.bannerBtn:hover{
opacity: 0.8;
}
.bannerPrev{
left: 60px;
}
.bannerNext{
right: 60px;
}
.controls{
position: absolute;
top: 400px;
left: 50%;
margin-left: -380px;
bottom: 30px;
text-align: center;
width: 760px;
}
.controls>span{
display: inline-block;
width: 20px;
height: 20px;
background-color: #a8a8a8;
margin: 10px 10px 10px 10px;
border-radius: 50%;
cursor: pointer;
opacity: 0.8;
}
.controls>.on{
opacity: 1;
background-color: #db2d15;
}
.ctrl_bg{
box-shadow: 0 20px 10px -18px #333333 inset; /* 设置控制块的背景阴影 */
}
/* 动画设置区 */
@keyframes showAni { /* 背景透明度动画 */
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
@keyframes contAni { /* 内容的移动动画 */
0%{
opacity: 0;
transform: translateY(57px);
}
100%{
opacity: 1;
transform: translateY(0);
}
}
@keyframes pAni { /* 文字移动动画 */
0%{
transform: translateX(-300px);
}
100%{
transform: translateX(0);
}
}
