.html 结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<link rel="stylesheet" href="css/scroll.css">
</head>
<body>
<div class="scroll">
<!-- 图片区域 -->
<div class="scroll-img">
<img class="active" src="img/001.jpg" alt="">
<img src="img/002.jpg" alt="">
<img src="img/003.jpg" alt="">
<img src="img/004.jpg" alt="">
</div>
<!-- 右下角切换按钮 -->
<ul class="scroll-tag">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
<!-- 左右切换图 -->
<div class="scroll-toggle">
<i class="toggle-left"><</i>
<i class="toggle-right">></i>
</div>
</div>
</body>
<script type="text/javascript" src="js/scroll.js"></script>
</html>
.css 样式文件
html, body, ul {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.scroll, .scroll-img, img {
width: 613px;
height: 230px;
}
.scroll {
margin: 50px auto;
position: relative;
/*用户不可拖拽选中*/
user-select: none;
}
.scroll-img{
position: absolute;
}
/*设置轮播图片，同位置按照指定状态显示*/
img{
position: absolute;
/*不可见*/
opacity: 0;
}
/*活跃状态下的img，可见*/
img.active{
opacity: 1;
}
/*右下选图按钮*/
ul{
position: absolute;
bottom: 10px;
right: 20px;
}
li{
/*画圈用于点击*/
width: 8px;
height: 8px;
border: 2px solid #888;
border-radius: 50%;
float: left;
margin-left: 10px;
background-color: transparent;
/*鼠标悬浮样式*/
cursor: pointer;
}
/*活跃状态下的li，变色*/
li.active {
transition: .2s;
background-color: #999;
}
/*左右切换按钮*/
.toggle-left, .toggle-right {
width: 40px;
height: 80px;
background-color: rgba(255,255, 255, 0.7);
line-height: 80px;
text-align: center;
font-size: 30px;
position: absolute;
top: 75px;
border-radius: 5px;
/*默认状态不可见*/
opacity: 0;
}
.toggle-left {
left: 2px;
}
.toggle-right {
right: 2px;
}
/*鼠标悬浮，可见，鼠标状态改变*/
.scroll:hover .toggle-left, .scroll:hover .toggle-right {
transition: .1s;
opacity: 1;
cursor: pointer;
}
.js 文件
// 获取页面内组件信息
let imgs = document.querySelectorAll('img');
let lis = document.querySelectorAll('li');
let toggle_left = document.querySelector('.toggle-left');
let toggle_right = document.querySelector('.toggle-right');
let scroll = document.querySelector('.scroll');
// 活跃的li
let li_active = null;
// 活跃的img
let img_active = null;
// 活跃的索引,给imgs和lis使用，二者活跃索引对应
let c_index = 0;
// 定时器
let timer = 0;
// 自动轮播，定时器放在函数内，方便后续停止和继续播放
function autoPlay() {
timer = setInterval(function () {
// 清除当前活跃状态
imgs[c_index].className = "";
lis[c_index].className = "";
// 循环的转折，遇3接1
c_index = c_index == 3 ? -1 : c_index;
// 轮播索引一次加一
c_index++;
// 设置新的活跃状态
imgs[c_index].className = "active";
lis[c_index].className = "active";
// 更新活跃的li|img，服务于点击切换
li_active = lis[c_index];
img_active = imgs[c_index];
},3000)
}
autoPlay();
// 监控鼠标时间，改变自动轮播状态
scroll.onmouseover = function () {
// 清除自动轮播
clearInterval(timer);
}
scroll.onmouseout = function () {
// 重新开启自动轮播
autoPlay();
}
// 右下，点击切换动画
for (let i = 0; i < lis.length; i++) {
// 记录当前活跃li|img
if (lis[i].className == "active") {
li_active = lis[i];
img_active = imgs[i];
}
// 点击时间
lis[i].onclick = function () {
// 切换活跃的li
li_active.className = "";
this.className = "active";
li_active = this;
// 切换活跃的img
img_active.className = "";
imgs[i].className = "active";
img_active = imgs[i];
// 更新活跃的索引，服务于自动轮播
c_index = i;
}
}
// 左右按钮
toggle_left.onclick = function () {
// 清除当前活跃状态
li_active.className = "";
img_active.className = "";
// 循环的转折，遇0接3
c_index = c_index == 0 ? 4 : c_index;
// 轮播索引一次加一
c_index--;
// 设置新的活跃状态
imgs[c_index].className = "active";
lis[c_index].className = "active";
// 更新活跃的li|img，服务于点击切换
li_active = lis[c_index];
img_active = imgs[c_index];
}
toggle_right.onclick = function () {
// 清除当前活跃状态
imgs[c_index].className = "";
lis[c_index].className = "";
// 循环的转折，遇3接0
c_index = c_index == 3 ? -1 : c_index;
// 轮播索引一次加一
c_index++;
// 设置新的活跃状态
imgs[c_index].className = "active";
lis[c_index].className = "active";
// 更新活跃的li|img，服务于点击切换
li_active = lis[c_index];
img_active = imgs[c_index];
}
