轮播图有几大要点，点击左右的尖角号，可以进行图片的切换，点击圆点，可以获取圆点对应的图片，可以自动播放图片，鼠标悬停在轮播图上时，轮播图会停止，离开时，轮播图会自动开始继续轮播。
下面来讲述思路：
首先，获取一些静态集合，提前声明一些将会用到的参数。
，
因要多次用到排他型的问题，先封装一个排他思想的函数
图片.png
图片.png
点击next，即右尖角号时，图片的下标会进行+1，而且在当循环到最后一张图片时，返回第一张图片，
调用排他思想的函数，会保留当前点击的图片，将其他图片和导航按钮的属性都隐藏。
图片.png
同理，调用prev，即左尖角号的按钮时，下标-1，递减到第一张时，会返回最后一张。调用排他函数
图片.png
设置一个间隔为0.5s的计时器，使图片可以进行自动轮播，自加方式和切换和右尖角号的方法相同
图片.png
设置一个鼠标事件mouseover，当鼠标移入时，定时器会停止，图片会停止轮播，停留在当前循环到的图片下标。
图片.png
鼠标移出时，会继续计时器，开始自动轮播
图片.png
为了导航点击时，能够使图片下标与导航点击的下标保持一致，必须设定index=this.ind，避免出现导航点击停止时，图片的轮播未停止的情况。
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
div {
width: 700px;
height: 550px;
border: 2px solid red;
margin: 0 auto;
position: relative;
}
div ul li,
div ul li img {
width: 100%;
height: 550px;
}
div ul li {
display: none;
}
.active {
display: block;
}
span {
position: absolute;
width: 80px;
height: 120px;
top: 50%;
margin-top: -60px;
background: rgba(23, 44, 33, 0.5);
font-size: 30px;
line-height: 120px;
text-align: center;
color: #fff;
}
span:nth-of-type(2) {
right: 0px;
}
ol {
position: absolute;
bottom: 20px;
left: 200px;
}
ol li {
float: left;
width: 40px;
height: 40px;
background: #fff;
color: #f23;
font-size: 30px;
text-align: center;
line-height: 40px;
border-radius: 50%;
margin: 0px 20px 20px 0;
}
ol .active {
background: blue;
}
</style>
</head>
<body>
<div>
<ul>
<li class="active"><img src="1.jpeg" alt=""></li>
<li><img src="2.jpeg" alt=""></li>
<li><img src="3.jpeg" alt=""></li>
<li><img src="4.jpeg" alt=""></li>
<li><img src="5.jpeg" alt=""></li>
<li><img src="6.jpeg" alt=""></li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ol>
<span id='prev'><</span>
<span id='next'>></span>
</div>
</body>
<script>
window.onload = function () {
var imgs = document.querySelectorAll('ul li');
var ol_lis = document.querySelectorAll('ol li');
var prev = document.querySelector('#prev');
var next = document.querySelector('#next');
var div = document.querySelector('div');
var index = 0,
timer = null;
//封装一个排他型的函数
function getOthers(index) {
for (var i = 0; i < imgs.length; i++) {
imgs[i].classList.remove('active');
ol_lis[i].classList.remove('active')
}
imgs[index].classList.add('active');
ol_lis[index].classList.add('active')
}
next.onclick = () => {
//点击就要往后，所以每点击一次下标+1
index++
if (index > imgs.length - 1) {
//当下标大于最大值时，返回0
index = 0;
}
//调用排他型函数
getOthers(index)
}
timer = setInterval(() => {
//设置一个时间，可以自己递加
index++
if (index > imgs.length - 1) {
index = 0;
}
getOthers(index)
}, 500)
div.onmouseover = () => {
//设置一个点击事件，当鼠标滑过时，终止计时器，并清空
clearInterval(timer);
timer = null;
}
div.onmouseout = () => {
//滑出时，立即恢复计时器
timer = setInterval(() => {
index++
if (index > imgs.length - 1) {
index = 0;
}
getOthers(index)
}, 500)
}
prev.onclick = () => {
//点击左尖角号时,图片的下标递减
index--
if (index < 0) {
index = imgs.length - 1;
}
getOthers(index)
}
for (var i = 0; i < ol_lis.length; i++) {
ol_lis[i].ind = i;
//先遍历ol中的每个下标，再将选中的下标的值绑定一个点击事件
ol_lis[i].onclick =function (){
index=this.ind
//为了保持ol中的下标和图片中的下标保持一致，进行排他
getOthers(this.ind)
}
}
}
</script>
</html>
网友评论