<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
#slideshow {
width: 50vw;
height:50vh;
overflow: hidden;
position: relative;
margin: 0 auto;
}
#imglist li {
width:20%;
height: 20%;
position: absolute;
/* 全部图片设为透明 */
opacity: 0;
transition: opacity 5s;
}
#imglist>li img {
height:500px;
}
#dotlist {
position: absolute;
bottom: 30px;
width: 100px;
display: flex;
justify-content: space-between;
left: 50%;
transform: translate(-50%);
}
#dotlist>li {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: rgb(206, 16, 16);
/* 全部小圆点设为半透明 */
opacity: 0.3;
cursor: pointer;
user-select: none;
}
/* 具有appear类的元素设为 不透明 即显示 */
#imglist>li.appear,
#dotlist>li.appear {
opacity: 1;
}
/* 左右轮播按钮 */
#pre,
#next {
position: absolute;
font-size: 100px;
color: rgba(0, 0, 0, .3);
top: 50%;
transform: translate(0, -50%);
font-weight: bold;
cursor: pointer;
user-select: none;
}
#pre {
left: 20px;
}
#next {
right: 20px;
}
#pre:hover,
#next:hover {
color: rgba(255, 255, 255, .3);
}
</style>
</head>
<body>
<div id="slideshow">
<ul id="imglist">
<li><a href="
https://imgtu.com/i/biTXWT";><img src="
https://s4.ax1x.com/2022/02/24/biTXWT.md.jpg"; alt="biTXWT.md.jpg" border="0"></a></li>
<li><a href="
https://imgtu.com/i/biTxlF";><img src="
https://s4.ax1x.com/2022/02/24/biTxlF.md.jpg"; alt="biTxlF.md.jpg" border="0"></a></li>
<li><a href="
https://imgtu.com/i/bi7SOJ";><img src="
https://s4.ax1x.com/2022/02/24/bi7SOJ.md.jpg"; alt="bi7SOJ.md.jpg" border="0"></a></li>
<li><a href="
https://imgtu.com/i/biTzy4";><img src="
https://s4.ax1x.com/2022/02/24/biTzy4.md.jpg"; alt="biTzy4.md.jpg" border="0"></a></li>
<li><a href="
https://imgtu.com/i/biTvSU";><img src="
https://s4.ax1x.com/2022/02/24/biTvSU.md.jpg"; alt="biTvSU.md.jpg" border="0"></a></li>
<li><a href="
https://imgtu.com/i/bi7FFx";><img src="
https://s4.ax1x.com/2022/02/24/bi7FFx.md.jpg"; alt="bi7FFx.md.jpg" border="0"></a></li>
<li><a href="
https://imgtu.com/i/bi79m9";><img src="
https://s4.ax1x.com/2022/02/24/bi79m9.md.jpg"; alt="bi79m9.md.jpg" border="0"></a></li>
<li><a href="
https://imgtu.com/i/bi7CwR";><img src="
https://s4.ax1x.com/2022/02/24/bi7CwR.md.jpg"; alt="bi7CwR.md.jpg" border="0"></a></li>
<li><a href="
https://imgtu.com/i/bi7PT1";><img src="
https://s4.ax1x.com/2022/02/24/bi7PT1.md.jpg"; alt="bi7PT1.md.jpg" border="0"></a></li>
</ul>
<ul id="dotlist">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div id="pre"><;</div>
<div id="next">>;</div>
</div>
<script>
// 找对象
var slideShow = document.getElementById("slideshow");
var imgList = document.getElementById("imglist");
var imgs = imgList.children;
var dotList = document.getElementById("dotlist");
var dots = dotlist.children;
var pre = document.getElementById("pre");
var next = document.getElementById("next");
var duration = 5000; // 设置轮播时间间隔
var Index = 0;
var count = imglist.children.length; // 获取图片数量
var timer; // 设置一个计时器
window.onload = function() {
imgList.children[0].classList.add("appear"); // 初始时显示第一幅图片
dotList.children[0].classList.add("appear"); // 初始时第一个点为白色
//为每个点添加单击处理函数
for (var i = 0; i < dots.length; i++) {
dots[i].index = i;
dots[i].onclick = changeMe;
}
//启动动画自动播放
timer = setInterval(rotate, duration);
// 鼠标移到图片上面时，停止动画
slideShow.onmouseover = function(event) {
clearInterval(timer);
};
// 鼠标离开图片上面时，启动动画
slideShow.onmouseout = function(event) {
timer = setInterval(rotate, duration);
};
//左右播放图片
pre.onclick = preImg;
next.onclick = nextImg;
}
//改变图片和点的当前状态（通过 添加 或 移除 appear 属性）
function change() {
for (var i = 0; i < dots.length; i++) {
dots[i].classList.remove("appear");
imgs[i].classList.remove("appear");
}
dots[Index].classList.add("appear");
imgs[Index].classList.add("appear");
}
//循环切换图片
function rotate() {
Index++;
if (Index == count) {
Index = 0;
}
change();
}
//切换上一幅图片
function preImg() {
Index--;
if (Index < 0) {
Index = count - 1;
}
change();
}
//切换下一幅图片
function nextImg() {
Index++;
if (Index == count) {
Index = 0;
}
change();
}
//单击某个圆点，切换到相应图片
function changeMe() {
Index = this.index;
change();
}
</script>
</body>
</html>
