我努力不来这里打扰你们,但我就是不知道将这些小幻灯片指示器合并到我的代码中。我已经看了太多教程,但无法弄清楚。我确信这很简单。请赐教!欣赏它!
HTML
<!---- Slide Show ---->
<div class="slide-container" id="myslideshow" data-ride="carousel">
<!--- Slide Wrapper--->
<div class="image-slideshow" id="myslideshow" data-ride="carousel">
<div class="slide-text">LAS VEGAS<br> WALK | EXPERIENCE</div>
<div class="image fade">
<img src="Images/eiffel_overlook_3-1.26.jpg" alt="Bachelorette Party at the Ghost Donkey Hidden Tequila Bar">
</div>
<div class="image fade">
<img src="Images/ghost_donkey_bechelorette_3-1.26.jpg" alt="Tour Stop Hidden Gem- Secluded View of Eiffel Tower">
</div>
<div class="image fade">
<img src="Images/love_sign_atrium_view_3-1.26.jpeg" alt="Laura Kimptons Love Sign at Palazzo Las Vegas">
</div>
<div class="image fade">
<img src="Images/big_group_mex_2_3-1.26.jpeg" alt="Big Group Mexicans with Vegas Street Performers">
</div>
<div class="image fade">
<img src="Images/birdbar_group_1_3-1.26.jpg" alt="Tour group at Bird Bar Flamingo Las Vegas">
</div>
<div class="image fade">
<img src="Images/waldorf_view_3-1.26.jpg" alt="View of the Strip from the Skybar at Waldorf Astoria">
</div>
<div class="image fade">
<img src="Images/venetian_stmarks_high_view_3-1.26.jpeg" alt="St. Mark's Square and gondolas at the Venetian Las Vegas">
</div>
</div>
<script src="main.js"></script>
</div>
Javascript
<!----- Javascript Slideshow ----->
<script>
let index = 0;
displayImages();
function displayImages()
{
let i;
const images = document.getElementsByClassName("image");
for (i = 0; i < images.length; i++)
{
images[i].style.display = "none";
}
index++;
if (index > images.length)
{
index = 1;
}
images[index-1].style.display = "block";
setTimeout(displayImages, 4000);
}
</script>
CSS
/*---- Slide Show ----*/
.slide-container
{
margin-top: 30px;
margin-bottom: 30px;
width: 100%;
}
.image-slideshow
{
width: 100%;
position:relative;
margin: auto;
}
.image-slideshow img
{
width: 100%;
}
.fade
{
animation-name: fade;
animation-duration: 5s;
}
@keyframes fade
{
from {opacity: .5}
to {opacity: 1}
}
.slide-text
{
font-size: 50px;
font-family: 'Oswald', sans-serif;
font-weight: 500;
line-height: 1.2;
position: absolute;
top: 40%;
left: 5%;
z-index: 3;
color: #fff;
margin: 0;
}
希望在幻灯片的“底部”(幻灯片上,而不是下面)添加点或破折号,以便客人可以翻阅幻灯片。同时,我还想将其保留在自动幻灯片上(现在它会自动运行)。再次感谢。
.slide-container {
margin-top: 30px;
margin-bottom: 30px;
width: 100%;
}
.image-slideshow {
width: 100%;
position: relative;
margin: auto;
}
.image-slideshow img {
width: 100%;
}
.fade {
animation-name: fade;
animation-duration: 5s;
}
@keyframes fade {
from {
opacity: .5
}
to {
opacity: 1
}
}
.slide-text {
font-size: 50px;
font-family: 'Oswald', sans-serif;
font-weight: 500;
line-height: 1.2;
position: absolute;
top: 40%;
left: 5%;
z-index: 3;
color: #fff;
margin: 0;
}
.indicators {
display: flex;
}
.indicators>div {
cursor: pointer;
margin: 5px;
}
<div class="slide-container" id="myslideshow" data-ride="carousel">
<!--- Slide Wrapper--->
<div class="image-slideshow" id="myslideshow" data-ride="carousel">
<div class="slide-text">LAS VEGAS<br> WALK | EXPERIENCE</div>
<div class="image fade">
<img src="Images/eiffel_overlook_3-1.26.jpg" alt="Bachelorette Party at the Ghost Donkey Hidden Tequila Bar">
</div>
<div class="image fade">
<img src="Images/ghost_donkey_bechelorette_3-1.26.jpg" alt="Tour Stop Hidden Gem- Secluded View of Eiffel Tower">
</div>
<div class="image fade">
<img src="Images/love_sign_atrium_view_3-1.26.jpeg" alt="Laura Kimptons Love Sign at Palazzo Las Vegas">
</div>
<div class="image fade">
<img src="Images/big_group_mex_2_3-1.26.jpeg" alt="Big Group Mexicans with Vegas Street Performers">
</div>
<div class="image fade">
<img src="Images/birdbar_group_1_3-1.26.jpg" alt="Tour group at Bird Bar Flamingo Las Vegas">
</div>
<div class="image fade">
<img src="Images/waldorf_view_3-1.26.jpg" alt="View of the Strip from the Skybar at Waldorf Astoria">
</div>
<div class="image fade">
<img src="Images/venetian_stmarks_high_view_3-1.26.jpeg" alt="St. Mark's Square and gondolas at the Venetian Las Vegas">
</div>
<div class="indicators" id="indicators"></div>
</div>
<script src="main.js"></script>
</div>
<script>
let index = 0;
const images = document.getElementsByClassName("image");
function createIndicators() {
const indicatorWrapper = document.querySelector('#indicators');
for (i = 0; i < images.length; i++) {
const dot = document.createElement('div');
dot.style.width = "10px";
dot.style.height = "10px";
dot.style.backgroundColor = "black";
dot.dataset.imageIndex = i;
dot.addEventListener('click', function (e) {
const index = e.target.dataset.imageIndex;
for (i = 0; i < images.length; i++) {
images[i].style.display = "none";
}
images[index].style.display = "block";
})
indicatorWrapper.append(dot)
}
}
function displayImages() {
let i;
for (i = 0; i < images.length; i++) {
images[i].style.display = "none";
}
index++;
if (index > images.length) {
index = 1;
}
images[index - 1].style.display = "block";
setTimeout(displayImages, 4000);
}
displayImages();
createIndicators();
</script>