我曾经有一个幻灯片,只能通过单击图像前进,但制作独立于网站的幻灯片,通过单击页面的左侧或右侧前进和后退。但是,我在将新幻灯片插入当前网站时遇到问题。也许你们可以帮助我。上面的照片示例显示了我希望按钮如何工作
这是我想要的幻灯片
HTML
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides">
<div class="numbertext">1 / 3</div>
<img src="img/3.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides">
<div class="numbertext">2 / 3</div>
<img src="img/30.JPG" style="width:100%">
<div class="text">Caption Two</div>
</div>
<div class="mySlides">
<div class="numbertext">3 / 3</div>
<img src="img/39.jpg" style="width:100%">
<div class="text">Caption Three</div>
</div>
<!-- Next and previous buttons -->
</div>
<div class="prev" onclick="plusSlides(-1)"></div>
<div class="next" onclick="plusSlides(1)"></div>
CSS:
* {box-sizing:border-box}
/* Slideshow container */
.slideshow-container {
max-width: 30%;
max-height: 30%;
position: relative;
margin: auto;
margin-top: 20vh;
margin-bottom: 20vh;
justify-content: space-between;
display: flex;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next and previous buttons */
.prev, .next {
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
cursor: pointer;
width: 49%;
height: 100%;
}
.prev {
left: 0;
}
.next {
right: 0;
}
/* Hide button elements by default */
.prev, .next {
opacity: 0.3;
background-color: gray;
transition: opacity 0.3s ease;
}
/* Show button elements on hover */
.slideshow-container .prev:hover, .slideshow-container .next:hover {
opacity: 0.5;
}
javascript:
let slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = 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[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
这是我当前的站点,其中的滑块只会向前移动:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="background_styles.css">
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
<title>The American Southwest Archive Pt.1</title>
</head>
<body>
<nav class="navbar">
<div class="brand-title"><strong><a href='/'>Justin Guthrie</a></strong></div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li ><a href="/">Selected Photos</a></li>
<li><a href="/newworldrites">New World Rites</a></li>
<li><a href="/shadowboxscultpures">Shadow Box Scultptures</a></li>
<li class="underline"><a href="/americansouthwest">The American Southwest <br>Archive Pt.1</br></a></a></li>
<li><a href="/lariverobjects">L.A. River Objects</a></li>
<li><a href="/Godisalive">God is Alive</a></li>
<div class="bottom-nav"><strong>
<li><a href="/about">About / CV</a></li>
<li><a href="https://shop.justin-guthrie.com/">Shop</a></li>
</strong>
</div>
</ul>
</div>
</nav>
<div class='desktop'>
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="slides">
<img src="img4/1 ACWA Cover.jpg" onclick="pslide(1)">
<br><strong>The American Southwest Archive Pt.1</strong>
<br>2023
<br>Published by B12 Books
<br><a href="https://shop.justin-guthrie.com/">Store</a>
</div>
<div class="slides">
<img src="img4/2 ACWA pages.jpg" onclick="pslide(1)">
</div>
<div class="slides">
<img src="img4/3 ACWA pages.jpg" onclick="pslide(1)">
</div>
<div class="slides">
<img src="img4/1 .jpg" onclick="pslide(1)">
</div>
</div>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.navbar {
float:left;
position: fixed;
margin: 25px 20px;
padding: 10px;
}
.brand-title {
font-size: 28px;
margin: 15px;
font-family: Arial, Helvetica, sans-serif;
}
.navbar-links {
margin-top: 40px;
height: 100%;
font-family:Georgia, 'Times New Roman', Times, serif;
font-size: 15px;
}
.navbar-links ul {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
.navbar-links li {
list-style: none;
}
.underline{
text-decoration: underline;
}
.navbar-links li a {
display: block;
text-decoration: none;
color:black;
margin-left: 15px;
margin-bottom: 15px;
}
.navbar-links li:hover {
text-decoration: none;
}
.bottom-nav {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
margin-top: 20px;
}
.bottom-nav li a {
margin-bottom: 10px;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 50px;
height: 40px;
}
.toggle-button .bar {
height: 8px;
width: 100%;
background-color:black;
border-radius: 10px;
}
.desktop{
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
flex-direction:column;
}
.description{
background-color: red;
display: flex;
justify-content: center;
}
.slideshow-container {
max-height:80%;
max-width:80%;
display: flex;
justify-content: center;
align-items: center;
flex-direction:column;
cursor:e-resize;
}
.Paragraphbox {
max-width: 700px;
display: flex;
justify-content: center;
align-items: center;
flex-direction:column;
}
.slides {
max-height:100%;
max-width:100%;
text-align: left;
padding-bottom: 10px;
font-family: Arial, sans-serif;
font-size: 12px !important;
}
.slides img{
max-height:100%;
max-width:100%;
text-align: center;
}
.mobile{display: none;}
@media screen and (max-width: 700px) {
.brand-title {
font-size: 3.5em;
margin-right: 200px;
margin-left:50px;}
.navbar {
flex-direction: column;
align-items: flex-start;
width: 90%;
}
.toggle-button {
display: flex;
margin-top: 30px;
}
.navbar-links {
display: none;
width: 100%;
background-color:white;
padding-top: 40px;
padding-bottom: 30px
}
.navbar-links ul {
width: 100%;
flex-direction: column;
font-size: 3em;
}
.navbar-links ul .bottom-nav {
font-size: 30px;
}
.navbar-links ul li {
text-align: center;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
.Paragraphbox {
max-width: 400px;
padding-top: 400px;
}
.Paragraphbox a {
color: blue !important;
}
}
a {
text-decoration: none;
color:black;
}
.navbar-links a:hover {
color: blue !important;
}
.slides {
font-size: 30px;
}
@media (pointer:none),(pointer:coarse) {
.brand-title {
font-size: 3.5em;
margin-right: 200px;
margin-left:50px;}
.navbar {
flex-direction: column;
align-items: flex-start;
width: 90%;
}
.toggle-button {
display: flex;
margin-top: 30px;
}
.navbar-links {
display: none;
width: 100%;
background-color:white;
padding-top: 40px;
padding-bottom: 30px;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
font-size: 3em;
}
.navbar-links ul .bottom-nav {
font-size: 30px;
}
.navbar-links ul li {
text-align: center;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
.Paragraphbox {
max-width: 400px;
padding-top: 400px;
}
.Paragraphbox a {
color: blue !important;
}
.slides {
font-size: 30px;
}
}
Javascript:
const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
toggleButton.addEventListener('click', () => {
navbarLinks.classList.toggle('active')
})
/* Button code */
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function () {
this.classList.toggle("active");
var contentbox = this.nextElementSibling;
if (contentbox.style.display === "block") {
contentbox.style.display = "none";
} else {
contentbox.style.display = "block";
}
});
}
/*slide code */
var slideIndex = 1;
showSlides(slideIndex);
function pslide(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("slides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) { slideIndex = 1 }
if (n < 1) { slideIndex = 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[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
我尝试将新幻灯片插入当前幻灯片,但图像跨越整个页面,不会前进或后退。我非常希望我的幻灯片看起来和现在一样,但有后退和前进按钮功能。