(都是最简单的实现过程,后续会继续优化,代码直接复制,把路径配好就能看到效果了)直接上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.maxBox {
width: 600px;
height: 400px;
margin: 20px auto;
/* 添加相对定位 便于后面的子元素使用绝对定位 */
position: relative;
}
#imgs {
width: 600px;
height: 400px;
display: flex;
/* 超出隐藏 */
overflow: hidden;
}
#imgs>img {
width: 600px;
height: 400px;
/* 添加过渡 */
transition: all 2s;
}
</style>
</head>
<body>
<!-- 定义一个大盒子,用于存放轮播的所有东西 -->
<div class="maxBox" id="maxBox">
<!-- 用于存放图片盒子 -->
<div id="imgs">
<img src="./img/z1.jpg" alt="图片一">
<img src="./img/z2.jpg" alt="图片二">
<img src="./img/z3.jpg" alt="图片三">
<img src="./img/z4.jpg" alt="图片四">
<img src="./img/z5.jpg" alt="图片五">
</div>
</div>
<script>
// 获取到最大的盒子
let maxBox = document.getElementById("maxBox");
// 获取到存放图片的盒子
let imgBox = document.getElementById("imgs");
// 图片切换函数
function lunbo() {
// 获取到所有的图片
let imgs = imgBox.children;
// 获取到第一张图片
let firstImg = imgs[0];
// 把第一张的左边距设置等同于负的图片宽度的距离
firstImg.style.marginLeft = -600 + "px";
// 使用延时调用的方法 2s后调用里面的函数
let delays = setTimeout(function() {
// 删除第一张图片
imgBox.removeChild(firstImg);
// 将第一张的左边距设为0
firstImg.style.marginLeft = "0px";
// 将取出的第一张图片添加到最后面
imgBox.appendChild(firstImg);
// 清除延时调用
clearTimeout(delays);
}, 2000);
}
// 声明一个全局的值为null的变量用于后面接收定时调用
let timing = null;
// 当页面加载完成时 每隔2s调用一次轮播函数
// 定时调用方法 setInterval()
window.onload = function() {
timing = setInterval(lunbo, 2000);
}
// 当鼠标移入大盒子的时候停止调用轮播函数
maxBox.addEventListener("mouseover", function() {
clearInterval(timing);
});
// 当鼠标移出大盒子的时候继续调用轮播函数
maxBox.addEventListener("mouseout", function() {
timing = setInterval(lunbo, 2000);
});
</script>
</body>
</html>
链接图片如下: