原生js写一个简单的轮播图
很适合我们这样的前端小白
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
.wrap{
width: 800px;
height: 400px;
position: relative;
margin: 0 auto;
}
.list{
width: 800px;
height: 400px;
list-style: none;
position: relative;
padding-left: 0;
}
.item{
opacity: 0;
transition: all 1s;/*动画效果*/
height: 100%;
widows: 100%;
color: white;
font-size: 50px;
position: absolute;
}
.item:nth-child(1){
width: 100%;
background-color: red;
}
.item:nth-child(2){
width: 100%;
background-color: lightyellow;
}
.item:nth-child(3){
width: 100%;
background-color: blue;
}
.item:nth-child(4){
width: 100%;
background-color: green;
}
.item:nth-child(5){
width: 100%;
background-color: gold;
}
/* 按钮的样式 */
.btn{
width: 50px;
height: 50px;
position: absolute;
border: none;/*去掉边框*/
outline:0 none;/*去掉按钮选中边框*/
top: 50%;
transform: translateY(-50%);/*垂直居中*/
z-index: 999;
opacity: 0.4;/*透明度*/
cursor: pointer;/*变手指*/
border-radius: 100%;/*变园*/
}
.btn span{
font-size: 30px;
}
#goPre{
left: 5px;
}
#goNecex{
right: 5px;
}
.item.active{
opacity: 1;
z-index: 666;
}
/*点的样式*/
.pointList{
padding-left: 0px;
list-style: none;
position: absolute;
right: 20px;
bottom: 20px;
z-index: 777;
}
.point{
width: 10px;
height: 10px;
background-color: rgba(0,0,0,0.4);
border-radius: 100%;/*变园*/
float: left;
margin-right: 20px;
border-style: solid;/*圈圈*/
border-width: 2px;
border-color: #f1f1f1;
cursor: pointer;/*变手指*/
}
.point.active{
background-color: #f1f1f1;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="list" id="wrap">
<li class="item active">1</li>
<li class="item">2</li>
<li class="item">3</li>
<li class="item">4</li>
<li class="item">5</li>
</ul>
<button type="buttom" class="btn" id="goPre"><span>
<</span> </button> <button type="buttom" class="btn" id="goNecex"><span>></span></button>
<!--写五个点-->
<ul class="pointList">
<li class="point active" data-index='0'></li>
<li class="point" data-index='1'></li>
<li class="point" data-index='2'></li>
<li class="point" data-index='3'></li>
<li class="point" data-index='4'></li>
</ul>
</div>
<script type="text/javascript">
//第一步，获取item列表和两个按钮和点
var items = document.getElementsByClassName('item'); //图片
var points = document.getElementsByClassName('point'); //点点
var goPreyou = document.getElementById('goPre');
var goNextzuo = document.getElementById('goNecex');
//第二步，制定一个索引----表示第几张图片的展示
var index = 0; //下标从零开始
//第三步，function一个函数，for循环重新赋值列表类名 = item
var qingChuliebiaolei = function() {
for (var i = 0; i < items.length; i++) { //这句for循环是重新赋值列表类名 = item，防止列表类名都等于item active
items[i].className = 'item'; //图片
}
for (var i = 0; i < points.length; i++) { //这句for循环是重新赋值列表类名 = point，防止列表类名都等于point active
points[i].className = 'point' //点点
}
}
//第四步，function一个函数，控制列表的类名是item active
var goIndex = function() {
qingChuliebiaolei();
points[index].className = 'point active'; //点点
items[index].className = 'item active'; //图片
}
//第五步，function一个函数，判断index不能超过列表本身的数，否则index = 0，让列表自动++
var goNext = function() { //右点击
if (index < 4) {
index++;
} else {
index = 0;
}
goIndex();
}
var goPre = function() { //左点击
if (index == 0) {
index = 4;
} else {
index--;
}
goIndex();
}
//第六步，添加一个匿名函数点击事件（委托事件），每一次点击都触发第五步的函数
goNextzuo.addEventListener('click', function() { //向右点击
goNext();
tiem = 0; //属于第七步，
})
goPreyou.addEventListener('click', function() { //向左点击
goPre();
tiem = 0; //属于第七步，
})
//第七步，给每个点挂上点击事件，循环出每个点，在进行点击事件
for (var i = 0; i < points.length; i++) {
points[i].addEventListener('click', function() {
//如何知道我们点击点之后对应相对应的图片切换？在点点的列表中我们加入了一个标签属性：data-index = ' ' 进行存储
var pointIndex = this.getAttribute('data-index'); //getAttribute获取对象属性
index = pointIndex;
goIndex();
time = 0; //属于第七步，点击时间回复到0，重新计时
})
}
//第七步，定时器----3秒跳转一次(20*150)
var tiem = 0; //定时器参数
function tiemr() {
play = setInterval(function() {
tiem++;
if (tiem == 20) {
goNext();
tiem = 0;
}
}, 150)
}
tiemr();
//鼠标移入
var wrap = document.getElementById("wrap"); //获取ul的id，进行鼠标移入移出的停止与播放
wrap.onmouseover = function() {
// console.log('鼠标移入停止');
clearInterval(play);
}
//鼠标移出
wrap.onmouseout = function() {
// console.log('鼠标移出，启动计时器');
tiemr();
}
</script>
</body>
</html>
来源：CSDN
作者：loser60
链接：https://blog.csdn.net/weixin_43734545/article/details/103509387