因为后续制作网页的需要轮播图，可能有包装好的插件可以直接使用，但是它的原理还是值得了解一下的。下面我首先展示一下我的轮播图的完整代码及运行结果的视频。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.overall{
width: 600px;
height: 300px;
border: 3px solid red;
position: relative;
/* 溢出隐藏 */
overflow: hidden;
}
.overall .content{
width: 100%;
height: 100%;
/*
把内容设置成相对定位，这样我们可以通过
改变left的值来改变.content中图片的位置
*/
position: relative;
left: 0px;
/* 弹性布局 */
display: flex;
/* 过度动画样式 */
transition:all 1s;
}
.overall .content img{
width: 100%;
height: 100%;
/* 防止图片宽度被压缩 */
flex-shrink: 0;
/*
目的是防止图片宽高比被改变
(cover：高度铺满容器，宽度等比缩放，超出的部分被剪掉)
如果想让图片完整显示可以设置成：contain
(contain：保持原有尺寸比例，使图片的宽度完整的显示，高度自动缩放。)
*/
object-fit: cover;
}
/* 设置控制按钮的样式 */
.shift>.but{
font-size: 50px;
font-weight:bolder;
/* color: red; */
color: rgba(0, 0, 0, 0.5);
}
/* 给左按钮进行定位 */
.shift>.but:first-of-type{
position: absolute;
left: 0px;
top: 100px;
}
/* 给右按钮进行定位 */
.shift>.but:last-of-type{
position: absolute;
left: 560px;
top: 100px;
}
.bottom{
width: 200px;
height: 20px;
display: flex;
/* 给按钮进行定位 */
position: absolute;
left: 210px;
top: 270px;
}
.bottom>div{
width: 30px;
height: 10px;
background-color: rgba(0, 0, 0, 0.5);
margin: 10px;
}
/* 设置悬浮在按钮上的样式变化 */
.shift>.but:hover{
color: gray;
}
.bottom>div:hover{
background-color: gray;
}
</style>
</head>
<body>
<!-- 整体框架 -->
<div class="overall">
<!-- 内容 -->
<div class="content">
<img src="./img/进击的巨人.jpeg" alt="进击的巨人">
<img src="./img/三体.jpg" alt="三体">
<img src="./img/有村架纯.jpg" alt="有村架纯">
</div>
<!-- 控制按钮 -->
<div class="shift">
<div class="but left" onclick="leftShift()"><</div>
<div class="but right" onclick="rightShift()">></div>
</div>
<div class="bottom">
<div class="zero" onclick="setIndex(0)"></div>
<div class="one" onclick="setIndex(1)"></div>
<div class="two" onclick="setIndex(2)"></div>
</div>
</div>
<script>
// 显示图片下标
let index=0;
let timer;
function refresh(){
// 设置下标的范围
if(index<0){
// 当下标小于0时，设置为最右边的图片
index=2;
}else if(index>2){
// 当下标大于2时，设置为最左边的图片
index=0;
}
// 获取整体框架
let _overall=document.querySelector(".overall");
// 获取整体框架的宽度
let _width=getComputedStyle(_overall).width
_width=Number(_width.slice(0,-2));
let _content=document.querySelector(".content");
_content.style.left=index*_width*-1+"px"
}
function leftShift(){
index--
console.log(index);
refresh()
}
function rightShift(){
index++
console.log(index);
refresh()
}
function setIndex(idx){
index=idx
refresh()
}
// 设置一个定时器，每隔3秒调用一次rightShift()函数，来实现向右滚动的效果
function startAutoScroll() {
timer = setInterval(rightShift, 3000);
}
function stopAutoScroll() {
// 重置自动滚动
clearInterval(timer);
}
// 自动滚动
startAutoScroll();
// 绑定事件监听
let leftButton = document.querySelector(".left");
let rightButton = document.querySelector(".right");
let _bottom = document.querySelector(".bottom");
leftButton.addEventListener("mouseover", stopAutoScroll);
leftButton.addEventListener("mouseout", startAutoScroll);
rightButton.addEventListener("mouseover", stopAutoScroll);
rightButton.addEventListener("mouseout", startAutoScroll);
_bottom.addEventListener("mouseover", stopAutoScroll);
_bottom.addEventListener("mouseout", startAutoScroll);
</script>
</body>
</html>运行效果：
轮播图
轮播图的制作涉及到CSS，HTML，JavaScript方面的知识，下面我会挑一些代码片段进行讲述：
// 获取整体框架的宽度
let _width=getComputedStyle(_overall).width
_width=Number(_width.slice(0,-2));在这里第一行_width得到结果是一串字符串：“600px”，而这里我是想要获取600这个数字，所以第二行通过slice(0,-2)来提取字符串“600px”中的数字部分，然后再使用`Number()` 函数，将600这个参数转换为数字类型，这样我们就可以在后续的计算中使用_width。
function leftShift(){
index--
refresh()
}
function rightShift(){
index++
refresh()
}index初始化设置的是0，而这里的加加减减其实是控制移动的值，每次移动都将会是这个框架自身宽度的倍数，进而呈现出不同图片间的切换展示。
// 设置下标的范围
if(index<0){
// 当下标小于0时，设置为最右边的图片
index=2;
}else if(index>2){
// 当下标大于2时，设置为最左边的图片
index=0;
}这里对index的控制很好的使展示的内容在这三张图片中循环。
// 设置一个定时器，每隔3秒调用一次rightShift()函数，来实现向右滚动的效果
function startAutoScroll() {
timer = setInterval(rightShift, 3000);
}
function stopAutoScroll() {
// 重置自动滚动
clearInterval(timer);
}
// 自动滚动
startAutoScroll();
// 绑定事件监听
let leftButton = document.querySelector(".left");
let rightButton = document.querySelector(".right");
let _bottom = document.querySelector(".bottom");
leftButton.addEventListener("mouseover", stopAutoScroll);
leftButton.addEventListener("mouseout", startAutoScroll);
rightButton.addEventListener("mouseover", stopAutoScroll);
rightButton.addEventListener("mouseout", startAutoScroll);
_bottom.addEventListener("mouseover", stopAutoScroll);
_bottom.addEventListener("mouseout", startAutoScroll);上述代码主要是实现轮播图的自动播放，以及悬浮在按钮区域时播放暂停，离开时播放继续。
`mouseover`和`mouseout`是JavaScript中的鼠标事件。
`mouseover`事件在鼠标指针进入元素时触发。
`mouseout`事件在鼠标指针离开元素时触发。
通过使用这两个事件，我们可以实现当鼠标悬停在按钮上时停止滚动，鼠标离开按钮时播放的效果。
我们使用`addEventListener()`函数为左右按钮的鼠标悬停和鼠标离开事件绑定了相应的处理函数。当鼠标悬停在按钮上时，会调用`stopAutoScroll()`函数停止自动滚动；而当鼠标离开按钮时，会调用`startAutoScroll()`函数继续自动滚动。
关于轮播图方面的内容就到这里了，如果对上述代码有什么疑问或者错误需要纠正欢迎大家在评论区留言，感谢大家的浏览阅读！
我的代码还不是很完美，还有很多可以优化的地方，如果以后有时间我还会将上述代码进行优化后再次发出。
今天白天满脑子都是有村架纯，哈哈哈哈哈哈，看着网上搜出来的照片我看着都就得有点害羞不好意思，然后还傻笑，她真的是我的理想中未来的另一半的模样，呜~
个人简介
👋 你好，我是 九病难祎，一位立志未来成为一名 Java工程师 热爱生活的终身学习者！目前的偶像是彭志辉（人称“稚晖君”，“野生钢铁侠”）。
🚀 我对技术的热情是我不断学习和分享的动力。希望未来通过自己所学习到的知识和技能带给我不再为金钱所困扰的生活，为自己未来所追求的幸福而创造基础和条件。我的博客内容目前没有具体的定位，未来我也将会不断摸索具体的方向，并进行归类。
💡 我的博客主要以分享自己总结的知识为主，同时它也将作为我个人的生活记录。
🌐 如果有什么问题，欢迎大家在评论区留言。
扫一扫
1651
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
