js轮播图
2021-06-26 本文已影响0人
每天进步一点点的zh
最近在网上找了很多写轮播图的例子，有些只有左右轮播，没有自动轮播，而有些只有自动轮播，没有左右轮播，有些又没有下方小圆点，用起来有点麻烦，自己跟着网上的视频摸索着写了一个轮播图（包括自动轮播，左右点击，小圆点3个功能）：里面有相应的注释，希望对大家能有所帮助，可以直接复制代码，样式可以自己改一下，图片只需要将路径换成自己的即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
width:800px;
height:400px;
}
.wrap{
margin: 100px auto;
width:800px;
height:400px;
position: relative;
}
/* 子绝父相 */
li{
list-style: none;
}
.list{
width:800px;
height:400px;
position:relative;
padding:0;
}
/* 淡出效果 */
.item{
position:absolute;
width:100%;
height:100%;
font-size: 40px;
opacity: 0;
transition: all 2s;
}
.btn{
top:150px;
width:100px;
height:100px;
position:absolute;
border-radius: 50%;
z-index: 9999;
font-size: 30px;
background-color:rgb(80, 206, 7);
opacity: 0.6;
border:0;
}
.btn:hover{
background-color:rgba(245, 210, 10, 0.9);
}
#gopre{
left:20px;
}
#gonext{
right:20px;
}
/* 两个类名,中间不要逗号 */
.item.active{
z-index:100;
opacity: 1;
}
.pointlist{
padding:0;
list-style: none;
position: absolute;
left:50%;
transform: translateX(-50%);
bottom:20px;
z-index: 100;
text-align: center;
}
.point.active{
background-color:rgb(54, 6, 226);
}
.point{
/* 小手形状 */
cursor: pointer;
float:left;
bottom:20px;
margin-left: 20px;
width:20px;
height:20px;
border-radius: 50%;
background-color:rgb(250, 246, 246);
}
</style>
</head>
<body>
<div class="wrap">
<ul class="list">
<!-- 第一个正在展示 -->
<li class="item active"><img src="./images/1.jpg" alt=""></li>
<li class="item"><img src="./images/2.jpg" alt=""></li>
<li class="item"><img src="./images/3.jpg" alt=""></li>
<li class="item"><img src="./images/4.jpg" alt=""></li>
<!-- 只要给谁加上active，就会显示出来 -->
<li class="item"><img src="./images/2.jpg" alt=""></li>
</ul>
<!-- 小圆点 -->
<ul class="pointlist">
<li class="point active" data-index="0">1</li>
<li class="point" data-index="1">2</li>
<li class="point" data-index="2">3</li>
<li class="point" data-index="3">4</li>
<li class="point" data-index="4">5</li>
</ul>
<!-- 左按钮 -->
<button type="button" class="btn" id="gopre"><</button>
<!-- 右按钮 -->
<button type="button" class="btn" id="gonext">></button>
</div>
<script>
var items=document.getElementsByClassName("item");
var goprebtn=document.getElementById("gopre");
var gonextbtn=document.getElementById("gonext");
var points=document.getElementsByClassName("point")
// 定时器图片跳转参数（这个的目的：点击了某个圆点之后，依然会等2s之后再进行跳转，time参数只在最后一个setinteral函数
// 中用到）
var time=0;
// index表示第几张图片在展示，第index张 图片有active这个类名
var index=0;
// 先全部去掉类
var clear=function(){
for(var i=0;i<items.length;i++){
items[i].className='item'
points[i].className='point'
}
}
var goindex=function(){
// 每次执行前都要先清除一下类
clear();
items[index].className='item active';
points[index].className='point active'
}
// 往后一张
var gonext=function(){
if(index<4){
index++;
}else{
index=0;
}
goindex();
}
// 往前一张
var gopre=function(){
if(index>0){
index--;
}else{
index=4;
}
goindex();
}
// 添加事件
gonextbtn.addEventListener('click',function(){
gonext();
})
goprebtn.addEventListener('click',function(){
gopre();
})
// 对小圆点添加事件：要想知道点击的是哪个小圆点，是通过自定义属性data-index获得的。
for(var i=0;i<points.length;i++){
points[i].addEventListener('click',function(){
// 获取所点击的小圆点的index的值
var aa=this.getAttribute('data-index');
index=aa;
goindex();
// 一点击time==0（确保点击之后依然会停顿2s再跳转到下一张）
time=0;
})
}
// 自动轮播：2000ms跳转
setInterval(function(){
time++;
if(time==20){
gonext();
time=0;
}
},200)
</script>
</body>
</html>
思路：这种方式不是之前的那种左右移动一张图片的距离，而是让图片重叠，利用z-index让其显示，尽量把函数进行封装，在定时器那样的目的是为了让点击小圆点之后，也会等待2s钟再继续轮播，而不是把每次点击的时间也算入定时器的时间间隔（2s）内
声明：本人大二软工一枚，刚刚接触js，以上纯属是个人的理解（本人是个辣鸡），内容很可能有不对的地方，欢迎大家指正，我们相互交流，共同进步鸭！
