在css使用动画可以实现简单的轮播图，但如今已经学习了JS，用JS来写轮播图更加方便快捷。今天就带着大家来实现轮播图。话不多说我们直接看代码：
这是css部分，进行了简单的样式操作接下来就进入js阶段：
运行结果如下：
在这小编把代码直接发给大家，仅供参考：
<title>轮播图</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.wrap {
width: 500px;
height: 350px;
margin: 0 auto;
position: relative;
background-color: orange;
background-position: center center;
background-size: cover;
}
.arraw {
width: 30px;
height: 30px;
background-color: rgba(0, 0, 0, .7);
color: #fff;
text-align: center;
position: absolute;
line-height: 30px;
top: 160px;
border-radius: 50%;
}
.prev {
left: 10px;
}
.prev:hover {
cursor: pointer;
}
.next {
right: 10px;
}
.next:hover {
cursor: pointer;
}
.dots {
position: absolute;
width: 160px;
height: 20px;
background-color: rgba(0, 0, 0, .7);
bottom: 10px;
left: 170px;
display: flex;
justify-content: space-around;
align-items: center;
border-radius: 10px;
}
.dot {
width: 10px;
height: 10px;
background-color: rgba(255, 255, 255, .7);
border-radius: 50%;
}
.dot:hover {
cursor: pointer;
}
.now {
background-color: #fff;
}
</style>
</head>
<body>
<div class="wrap">
<div class="arraw prev">
< </div>
<div class="arraw next"> > </div>
<div class="dots">
<div class="dot now"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</body>
<script>
var data = ['https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.niutuku.com%2Fdesk%2F130220%2F17%2F17-niutuku.com-439.jpg&refer=http%3A%2F%2Fimg2.niutuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655342711&t=02a3a61ac81b371454d8957accbb3157',
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Fc8%2F05%2F06%2Fc805066d0b20adf869ac39ef3ce0a2fd.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655342711&t=c4e293679b5c8aa638e8666d2036837c',
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F5b%2F78%2Fcb%2F5b78cb5c9b666c1bd4845c31c83a544d.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655342711&t=0ec37ea61a60009897d5a353b8e9871f',
'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdesk-fd.zol-img.com.cn%2Ft_s960x600c5%2Fg2%2FM00%2F0A%2F0E%2FChMlWV7Ny86IKavgABdq99NojwIAAPgxwETpvoAF2sP356.jpg&refer=http%3A%2F%2Fdesk-fd.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655342711&t=12383ff3a9f62c4b81e8d22a43969bfb'
]
var dWrap = document.querySelector('.wrap');
var dPrev = document.getElementsByClassName('prev')[0];
var dNext = document.getElementsByClassName('next')[0];
var dots = document.querySelectorAll('.dot');
var showIndex = 0; //当前显示图片的下标
var timer = null;
timer = setInterval(function() {
dots[showIndex].classList.remove("now");
showIndex = showIndex + 1;
//越界处理
showIndex = showIndex === data.length ? 0 : showIndex;
changeBg(data[showIndex]);
dots[showIndex].classList.add("now");
}, 2000)
//点击事件
for (var i = 0; i < dots.length; i++) {
dots[i].index = i;
dots[i].onclick = function() {
dots[showIndex].classList.remove("now");
showIndex = this.index;
changeBg(data[showIndex]);
dots[showIndex].classList.add("now");
}
}
dPrev.onclick = function() {
//修改dot状态
// dots[showIndex].className = 'dot';
dots[showIndex].classList.remove("now");
showIndex = showIndex - 1;
showIndex = showIndex === -1 ? data.length - 1 : showIndex;
changeBg(data[showIndex]);
dots[showIndex].classList.add("now");
}
dNext.onclick = function() {
dots[showIndex].classList.remove("now");
showIndex = showIndex + 1;
//越界处理
showIndex = showIndex === data.length ? 0 : showIndex;
changeBg(data[showIndex]);
dots[showIndex].classList.add("now");
}
//改变dWrap背景图
function changeBg(pic) {
dWrap.style.backgroundImage = `url(${pic})`;
// 改变指示点
}
changeBg(data[0]);
</script>
</html>
