JS事件笔记：banner轮播
景宏富
利用列表对banner图片进行布局，用绝对定位叠加图片，以display隐藏图片和显示第一张图片，用定位布局切换按钮和控制点；
HTML代码：
<body>
<!-- banner -->
<div class="banner" id="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代码：
{
//获取页面id
let btnPrev = document.getElementById("btnPrev");
let btnNext = document.getElementById("btnNext");
let banner = document.getElementById("banner");
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 ); // 显示图片
};
let myset = setInterval( goRight , 5000 ); //设置定时 对图片进行自动轮播
banner.addEventListener("mouseenter",function(){ //当鼠标以上图片时轮播停止
clearInterval(myset);
console.info(1);
});
banner.addEventListener("mouseleave",function(){ //当鼠标移开时轮播继续
myset = setInterval( goRight , 5000 );
});
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代码：
.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);
}
}
类似资料：