[英]How do you automate an image carousel using HTML, JS, & CSS?
I'm not very good at JS, so I had to suffer through a video explaining how to make an image carousel using HTML, CSS, and JS.我不是很擅长JS,所以我不得不通过视频解释如何使用HTML、CSS和JS制作图像轮播。 I wanted to be able to automate it but could not figure out how to do so, due to my inexperience.
我希望能够使它自动化,但由于我缺乏经验,不知道该怎么做。 If someone could explain how to modify this code to be able to take both manual inputs via the arrows and automatically cycle to the next image, I would greatly appreciate it.
如果有人可以解释如何修改此代码以能够通过箭头进行手动输入并自动循环到下一张图像,我将不胜感激。
This is the code for the manual button slider (HTML, JS, CSS)这是手动按钮 slider 的代码(HTML、JS、CSS)
<section aria-label = 'sliderImages'>
<div class = 'slider' data-slider>
<button class = 'backButton' data-slider-button = 'previous'></button>
<button class = 'nextButton' data-slider-button = 'next'></button>
<ul data-slides>
<li class = 'slide' data-active>
<img src = '/Images/Red.png' alt = ''>
</li>
<li class = 'slide'>
<img src = '/Images/Yellow.png' alt = ''>
</li>
<li class = 'slide'>
<img src = '/Images/Blue.png' alt = ''>
</li>
<li class = 'slide'>
<img src = '/Images/Green.png' alt = ''>
</li>
</ul>
</div>
</section>
const buttons = document.querySelectorAll('[data-slider-button]')
buttons.forEach(button => {
button.addEventListener('click', () => {
const offset = button.dataset.sliderButton === 'next' ? 1 : -1
const slides = button
.closest('[data-slider]')
.querySelector('[data-slides]')
const activeSlide = slides.querySelector('[data-active]')
let newIndex = [...slides.children].indexOf(activeSlide) + offset
if (newIndex < 0) newIndex = slides.children.length - 1
if (newIndex >= slides.children.length) newIndex = 0
slides.children[newIndex].dataset.active = true
delete activeSlide.dataset.active
})
})
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.slides {
width: 100%;
height: 100vh;
position: relative;
}
.slide {
position: absolute;
inset: 0;
opacity: 0;
transition: 0.8s opacity ease-in;
transition-delay: 0.8s;
}
.slide[data-active] {
opacity: 1;
transition-delay: 0s;
z-index: 1;
}
.slide > img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.backButton {
position: absolute;
width: 24px;
height: 45px;
top: 50%;
left: 50px;
transform: translate(0%, 50%);
border: none;
background: url('/Images/Left Arrow.png');
z-index: 2;
}
.backButton:hover {
cursor: pointer;
}
.nextButton {
position: absolute;
width: 24px;
height: 45px;
top: 50%;
right: 50px;
transform: translate(0%, 50%);
border: none;
background: url('/Images/Right Arrow.png');
z-index: 2;
}
.nextButton:hover {
cursor: pointer;
}
You can use the below code to make an automatic image slider. Or change your js code and set setTimeout() function.您可以使用以下代码制作自动图像 slider。或者更改您的 js 代码并设置 setTimeout() function。
let slideIndex = 0; showSlides(); function showSlides() { let i; let slides = document.getElementsByClassName("mySlides"); let dots = document.getElementsByClassName("dot"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; setTimeout(showSlides, 2000); // Change image every 2 seconds }
* {box-sizing: border-box;}.mySlides {display: none;} img {vertical-align: middle;} /* Slideshow container */.slideshow-container { max-width: 1000px; position: relative; margin: auto; } /* Caption text */.text { color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center; } /* Number text (1/3 etc) */.numbertext { color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0; } /* The dots/bullets/indicators */.dot { height: 15px; width: 15px; margin: 0 2px; background-color: #bbb; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; }.active { background-color: #717171; } /* Fading animation */.fade { animation-name: fade; animation-duration: 1.5s; } @keyframes fade { from {opacity: .4} to {opacity: 1} } /* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) {.text {font-size: 11px} }
<h2>Automatic Slideshow</h2> <p>Change image every 2 seconds:</p> <div class="slideshow-container"> <div class="mySlides fade"> <div class="numbertext">1 / 3</div> <img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%"> <div class="text">Caption Text</div> </div> <div class="mySlides fade"> <div class="numbertext">2 / 3</div> <img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%"> <div class="text">Caption Two</div> </div> <div class="mySlides fade"> <div class="numbertext">3 / 3</div> <img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%"> <div class="text">Caption Three</div> </div> </div> <br> <div style="text-align:center"> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.