【发布时间】：2023-02-24 14:52:02
【问题描述】：
好的，我目前有一个包含一些 JS 的 HTML 旋转木马滑块。
利益不仅是控制我剩下的理智（我知道，“理智”对吗？再次提醒我那是什么？）而且还要避免拿起我的电脑并反复把它扔到墙上，可以请查看下面的代码并告诉我为什么我无法让幻灯片 - 嗯 - 滑动。
谢谢
@charset "utf-8";
/* CSS Document */
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
text-align: center;
}
.content{
height: 400px;
width: 750px;
overflow: hidden;
}
.content .images{
height: 100%;
width: 100%;
}
.images div{
height: 100%;
width: 100%;
}
.btm-sliders{
position: absolute;
bottom: 20px;
left: 50%;
display: flex;
transform: translate(-50%);
}
.btm-sliders span{
height: 15px;
width: 50px;
border: 4px solid red;
margin: 0 3px;
cursor: pointer;
}
.content .slide{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 45px;
/*height: 45px;*/
border: 2px solid red;
cursor: pointer;
background: rgba(255,255,255,0.1);
}
.content .slide:hover{
background-color:#0d0155;
}
.slide span{
font-size: 35px;
color: red;
line-height: 41px;
}
.content .right{
right: 5px;
}
.content .left{
left: 5px;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="styles-carousel.css" rel="stylesheet" type="text/css">
<script src="https://kit.fontawesome.com/ad445e50d3.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="content">
<div class="images">
<div class="">You</div>
<div class="">should</div>
<div class="">see</div>
<div class="">this</div>
<div class="">one at a time</div>
</div>
<div onClick = "side_slide(-1)" class="slide left">
<span class="fas fa-angle-left"></span>
</div>
<div onClick = "side_slide(1)" class="slide right">
<span class="fas fa-angle-right"></span>
</div>
<div class="btm-sliders">
<span onClick = "btm_slide(1)"></span>
<span onClick = "btm_slide(2)"></span>
<span onClick = "btm_slide(3)"></span>
<span onClick = "btm_slide(4)"></span>
<span onClick = "btm_slide(5)"></span>
</div>
</div>
<script>
var indexValue = 1;
showDiv(indexValue);
function btm_slide(e){showDiv(indexValue = e);}
function side_slide(e){showDiv(indexValue += e);}
function showImg(e){
var i;
const Div = document.querySelectorAll('div');
const sliders = document.querySelectorAll('.btm-sliders span');
if(e > Div.length){indexValue = 1}
if(e < 1){indexValue = Div.length}
for(i = 0; i < div.length; i++){
Div[i].style.display = "none";
}
for(i = 0; i< Div.length; i++){
sliders[i].style.background = "rgba(255,255,255,0.1)";
}
Div[indexValue-1].style.display = "block";
sliders[indexValue-1].style.background= "white";
}
</script>
</body>
</html>【问题讨论】：
-
请养成阅读错误的习惯，不要忽视它们。总是阅读错误。
"Uncaught ReferenceError: Div is not defined"- 你引用了一个大写字母 DDiv的变量，但你的变量被命名为小写div。 -
我实际上确实养成了阅读错误的习惯，我将其更改为小写的“d”并猜测是什么，结果仍然相同......
-
你猜怎么着，你还在忽略错误
-
"message": "ReferenceError: showDiv is not defined", -
哦，你猜怎么着，我定义了''ShowDiv'，你猜怎么着......
标签： javascript html css