英文:
HTML JS Carousel Slider that doesn't slide
问题
@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;
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=""></div>You</div>
<div class=""></div>should</div>
<div class=""></div>see</div>
<div class=""></div>this</div>
<div class=""></div>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>
英文:
OK, I currently have an HTML carousel slider with some JS involved.
In the interests is not only keeping what is left of my sanity in check (I know, "sanity" right? Remined me what that is again?) but also to keep from picking my computer up and throwing it against the wall repeatedly, can any look at the code below and tell me why I cannot get the slides to - well - slide.
Thank you
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
@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;
}
<!-- language: lang-html -->
<!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>
<!-- end snippet -->
答案1
得分: 1
尝试这样做。更新你的代码：
var indexValue = 1;
showDiv(indexValue);
function btm_slide(e) {
showDiv(indexValue = e);
}
function side_slide(e) {
showDiv(indexValue += e);
}
function showDiv(e) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (e > slides.length) {
indexValue = 1
}
if (e < 1) {
indexValue = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[indexValue - 1].style.display = "block";
dots[indexValue - 1].className += " active";
}
@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;
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="mySlides">You</div>
<div class="mySlides">should</div>
<div class="mySlides">see</div>
<div class="mySlides">this</div>
<div class="mySlides">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 class="dot" onClick="btm_slide(1)"></span>
<span class="dot" onClick="btm_slide(2)"></span>
<span class="dot" onClick="btm_slide(3)"></span>
<span class="dot" onClick="btm_slide(4)"></span>
<span class="dot" onClick="btm_slide(5)"></span>
</div>
</div>
</body>
</html>
英文:
Try this. Updated your code
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var indexValue = 1;
showDiv(indexValue);
function btm_slide(e){showDiv(indexValue = e);}
function side_slide(e){showDiv(indexValue += e);}
function showDiv(e){
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (e > slides.length) {indexValue = 1}
if (e < 1) {indexValue = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[indexValue-1].style.display = "block";
dots[indexValue-1].className += " active";
}
<!-- language: lang-css -->
@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;
}
<!-- language: lang-html -->
<!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="mySlides">You</div>
<div class="mySlides">should</div>
<div class="mySlides">see</div>
<div class="mySlides">this</div>
<div class="mySlides">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 class="dot" onClick = "btm_slide(1)"></span>
<span class="dot" onClick = "btm_slide(2)"></span>
<span class="dot" onClick = "btm_slide(3)"></span>
<span class="dot" onClick = "btm_slide(4)"></span>
<span class="dot" onClick = "btm_slide(5)"></span>
</div>
</div>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论