纯前端实现—手动轮播图
Posted 孤寒者
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纯前端实现—手动轮播图相关的知识，希望对你有一定的参考价值。
实现效果：
前面有篇文讲解过初级轮播图——https://gu-han-zhe.blog.csdn.net/article/details/121309051，效果有点低级，所以这篇给B格提升些！
共有两种轮播图方式进行选择：
- 第一种：可左右切换图片，但是左右有界限，不可逾越；
- 第二种：可左右切换图片，左右无界限。
手动轮播图1
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中级轮播图</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#box{
width: 600px;
height: 350px;
margin: 20px auto;
position: relative;
/*border: 1px solid red;*/
}
#box .image,#box .image ul,#box .image ul li,#box .image img{
width: 100%;
height: 100%;
}
li{
position: absolute;
/*透明度为0，即不显示*/
opacity: 0;
top: 0;
left: 0;
/*给过滤，执行慢点*/
transition: opacity 0.2s;
}
#box .image ul li.show{
opacity: 1;
}
#box .but{
width: 100%;
/*border: 1px solid red;*/
position: absolute;
top: 145px;
left: 0;
}
#box .but p{
width: 50px;
height: 60px;
line-height: 60px;
text-align: center;
font-size: 18px;
transition: all 0.2s;
/*0.3是指定的透明度*/
background-color: rgba(0,0,0,0.3);
}
#box .but p:hover{
cursor: pointer;
background-color: rgba(0,0,0,0.7);
}
#box .but p.left{
float: left;
}
#box .but p.right{
float: right;
}
#box .tips{
bottom: 0;
/*border: 1px solid red;*/
height: 30px;
width: 100%;
line-height: 30px;
text-align: center;
position: absolute;
}
#box .switching{
height: 40px;
width: 100%;
line-height: 40px;
text-align: center;
/*border: 1px solid red;*/
margin-top: 20px;
}
#box .switching div{
display: inline-block;
width: 150px;
height: 100%;
background-color: aqua;
}
#box .switching div.show{
color: white;
background-color: skyblue;
}
#box .switching div:hover{
color: white;
cursor: pointer;
background-color: darkgoldenrod;
}
</style>
</head>
<body>
<div id="box">
<div class="image">
<ul>
<li class="show"><img src="轮播图的图片/1.jpg" alt=""></li>
<li><img src="轮播图的图片/2.jpg" alt=""></li>
<li><img src="轮播图的图片/3.jpg" alt=""></li>
<li><img src="轮播图的图片/4.jpg" alt=""></li>
<li><img src="轮播图的图片/5.jpg" alt=""></li>
</ul>
</div>
<div class="but">
<p class="left"> < </p>
<p class="right"> > </p>
</div>
<div class="tips">
<p><span>1</span>/5</p>
</div>
<div class="switching">
<div class="show">第一种</div>
<div>第二种</div>
</div>
</div>
<script>
var aLi = document.querySelectorAll("#box .image ul li"),
aBtu = document.querySelectorAll("#box .but p"),
oSpan = document.querySelectorAll("#box .tips span")[0],
aDiv = document.querySelectorAll("#box .switching div"),
index = 0;
is_switching = true;
// 左右按钮
aBtu[0].onclick = function () {
aLi[index].classList.remove("show");
index--;
if(index<=0){
if(is_switching){
index = 0;
}else{
index = aLi.length-1;
}
}
oSpan.innerHTML = index + 1;
aLi[index].classList.add("show")
};
aBtu[1].onclick = function () {
aLi[index].classList.remove("show");
index++;
if(index>aLi.length-1){
if(is_switching){
index = aLi.length-1;
}else{
index = 0;
}
}
oSpan.innerHTML = index + 1;
aLi[index].classList.add("show")
};
// 下面两个按钮
aDiv[0].onclick = function () {
this.classList.add("show");
aDiv[1].classList.remove("show");
is_switching = true;
};
aDiv[1].onclick = function () {
this.classList.add("show");
aDiv[0].classList.remove("show");
is_switching = false
}
</script>
</body>
</html>
以上是关于纯前端实现—手动轮播图的主要内容，如果未能解决你的问题，请参考以下文章