我已经看到有人通过点击子弹使用替换功能，但我不明白为什么必须使用替换功能以及它是如何工作的可能还有更好的方法？
var sliderImages = document.querySelectorAll('.slide');
var arrowLeft = document.querySelector('#arrow-left');
var arrowRight = document.querySelector('#arrow-right');
var arrowSlide = document.querySelectorAll('.arrow');
var sliderBullets = document.querySelectorAll('.bullets');
var current = 0;
//reset slideimages
function resetSlide() {
for (var i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = 'none';
}
}
//slide left
arrowLeft.addEventListener('click', function () {
resetSlide();
if (current === 0) {
current = sliderImages.length;
}
sliderImages[current - 1].style.display = 'block';
current--;
});
//slide right
arrowRight.addEventListener('click', function () {
resetSlide();
if (current === sliderImages.length - 1) {
current = -1;
}
sliderImages[current + 1].style.display = 'block';
current++;
});
//start slide
function startSlide() {
resetSlide();
sliderImages[0].style.display = 'block';
}
//slide images by clicking bullets
//called startslide function
startSlide();body {
margin: 0;
}
li, a{
text-decoration: none;
list-style-type: none;
text-decoration-line: none;
color: black;
}
/*main-menu*/
#main-menu {
position: relative;
}
#main-menu ul {
margin: 0;
padding: 0;
}
#main-menu li {
display: inline-block;
}
#main-menu a {
display: block;
width: 100px;
padding: 10px;
border: 1px solid;
text-align: center;
}
/*sub-topics*/
#sub-topics {
position: absolute;
display: none;
margin-top: 10px;
width: 100%;
left: 0;
}
#sub-topics ul {
margin: 0;
padding: 0;
}
#sub-topics li {
display: block;
}
#subTopics a {
text-align: left;
}
/*columns*/
#column1, #column2, #column3 {
position: relative;
float: left;
left: 125px;
margin: 0px 5px 0px 0px;
}
/*hover underline*/
#main-menu li:hover {
text-decoration: underline;
}
/*slideshow*/
#slideshow {
position: relative;
width: 100%;
height: 100%;
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg);
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg);
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg);
}
.slide {
background-repeat: no-repeat;
background-position: center;
background-size: 800px 400px;
width: 800px;
height: 400px;
margin: auto;
margin-top: 40px;
}
.slide-contain {
position: absolute;
left: 50%;
bottom: 50%;
transform: translate3d(-50%,-50%,0);
text-align: center;
}
.slide-contain span {
color: white;
}
/*arrow*/
.arrow {
position: absolute;
cursor: pointer;
top: 200px;
width: 0;
height: 0;
border-style: solid;
}
.arrow:hover {
background-color: #e0dede;
transition: background-color 0.6s ease;
}
/*arrow-left*/
#arrow-left {
position: absolute;
border-width: 30px 40px 30px 0px;
border-color: transparent gray transparent transparent;
left: 0;
margin-left: 300px;
}
/*arrow-right*/
#arrow-right {
border-width: 30px 0px 30px 40px;
border-color: transparent transparent transparent gray;
right: 0;
margin-right: 300px;
}
/*bullets*/
#slidebullet {
position: relative;
top: -30px;
text-align: center;
}
.bullets {
display: inline-block;
background-color: gray;
width: 15px;
height: 15px;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.6s ease;
}
.bullets:hover {
background-color: #e0dede;
}
.clicked {
background-color: #ff0000;
}<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<header></header>
<nav>
<div id="main-menu">
<ul>
<li><a href="">Logo</a></li>
<li><a href="">Home</a></li>
<li>
<a href="" id="mainTopics">Topics</a>
<div id="sub-topics">
<div id="column1" class="columns">
<ul>
<li><a href="">example1</a></li>
<li><a href="">example2</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>
<div id="slideshow">
<div id="arrow-left" class="arrow"></div>
<div id="slide1" class="slide">
<div class="slide-contain">
<span>Image One</span>
</div>
</div>
<div id="slide2" class="slide">
<div class="slide-contain">
<span>Image Two</span>
</div>
</div>
<div id="slide3" class="slide">
<div class="slide-contain">
<span>Image Three</span>
</div>
</div>
<div id="slidebullet">
<div id="bullet1" class="bullets"></div>
<div id="bullet2" class="bullets"></div>
<div id="bullet3" class="bullets"></div>
</div>
<div id="arrow-right" class="arrow"></div>
</div>
<script src="jquery.js"></script>
<script src="index.js"></script>
<script>
</script>
</body>
</html>
答案 0 :(得分：1)
要在导航中为正确的“项目符号”着色，每次幻灯片更改时，您都可以简单地遍历所有这些项目。 所以你可以写一个这样的函数：
function colorBullets(){
sliderBullets.forEach( bullet => {
if(bullet.getAttribute("id").slice(-1) === current){ //First we check if lastletter of your id matches the current slide. For that to work your bullet ids should start with 0 - bullet0, bullet1 and so on. (because your current slide counter starts with 0 too)
bullet.classList.add("clicked"); //if it matches the current slide we add our class.
} else {
bullet.classList.remove("clicked"); // we remove the class from every other bullet so that at one time only one is highlighted.
}
});
}
每次更换幻灯片时都会点开它。
仔细阅读评论以了解其运作方式。 .slice（-1）用于查找字符串中的最后一个字符。如果代码让您感到困惑，也请阅读箭头功能。
对于自动滑块，您基本上应该将代码放在 setInterval 内的左侧滑动或右侧滑动按钮，这将每隔X秒触发您的方法。阅读设定间隔功能，您将立即得到它，因为它是一个相当简单的概念。 （你可以从这里开始：https://www.w3schools.com/jsref/met_win_setinterval.asp）
如果有什么事情不清楚，请告诉我:)
答案 1 :(得分：1)
请参阅下面的代码段。我编辑了你的代码。但请注意，滑块可以更实用。
var sliderImages = document.querySelectorAll( '.slide' ),
arrowLeft = document.querySelector( '#arrow-left' ),
arrowRight = document.querySelector( '#arrow-right' ),
arrowSlide = document.querySelectorAll( '.arrow' ),
sliderBullets = document.querySelectorAll( '.bullets' ),
current = 0;
//reset slideimages
function resetSlide() {
for (var i = 0; i < sliderImages.length; i++) {
sliderImages[ i ].style.display = 'none';
sliderImages[ i ].classList.remove( 'slide-fadein' );
sliderBullets[ i ].classList.remove( 'bullets-show' )
}
}
//slide left
arrowLeft.addEventListener('click', function () {
resetSlide();
if (current === 0) {
current = sliderImages.length;
}
current--;
sliderImages[ current ].style.display = 'block';
sliderImages[ current ].classList.add( 'slide-fadein' );
sliderBullets[ current ].classList.add( 'bullets-show' )
});
//slide right
arrowRight.addEventListener('click', function () {
resetSlide();
if (current === sliderImages.length - 1) {
current = -1;
}
current++;
sliderImages[ current ].style.display = 'block';
sliderImages[ current ].classList.add( 'slide-fadein' );
sliderBullets[ current ].classList.add( 'bullets-show' )
});
//start slide
function startSlide() {
sliderImages[ 0 ].style.display = 'block';
sliderImages[ 0 ].classList.add( 'slide-fadein' );
sliderBullets[ 0 ].classList.add( 'bullets-show' );
setInterval( function () {
arrowRight.click();
sliderBullets[ current ].classList.add( 'bullets-show' )
}, 5000 )
}
//slide images by clicking bullets
for ( let i = 0; i < sliderBullets.length; i++ ) {
sliderBullets[ i ].addEventListener( 'click', function () {
resetSlide();
sliderImages[ i ].style.display = 'block';
sliderImages[ i ].classList.add( 'slide-fadein' );
sliderBullets[ i ].classList.add( 'bullets-show' );
current = i
});
}
//called startslide function
startSlide();body {
margin: 0
}
#slideshow {
position: relative;
width: 100%;
height: 100%
}
#slide1 {
background-image: url(https://preview.ibb.co/mV3TR7/1.jpg)
}
#slide2 {
background-image: url(https://preview.ibb.co/bSCBeS/2.jpg)
}
#slide3 {
background-image: url(https://preview.ibb.co/kgG9Yn/3.jpg)
}
.slide {
opacity: 0;
display: none;
background-repeat: no-repeat;
background-position: center;
background-size: 800px 400px;
width: 800px;
height: 400px;
margin: 0 auto;
margin-top: 40px
}
.slide-fadein {
-webkit-animation: myfadein 500ms forwards;
-moz-animation: myfadein 500ms forwards;
-o-animation: myfadein 500ms forwards;
animation: myfadein 500ms forwards
}
.slide-contain {
position: absolute;
left: 50%;
bottom: 50%;
font-size: 3em;
transform: translate3d(-50%,-50%,0);
text-align: center
}
.slide-contain span {
color: white
}
.arrow {
position: absolute;
cursor: pointer;
top: 185px;
width: 0;
height: 0;
border-style: solid;
opacity: .5;
transition: all 0.3s ease
}
.arrow:hover {
opacity: 1
}
#arrow-left {
position: absolute;
border-width: 30px 40px 30px 0px;
border-color: transparent gray transparent transparent;
left: 300px
}
#arrow-left:hover {
transform: translateX(-5px)
}
#arrow-right {
border-width: 30px 0px 30px 40px;
border-color: transparent transparent transparent gray;
right: 300px
}
#arrow-right:hover {
transform: translateX(5px)
}
#slidebullet {
position: relative;
top: -30px;
text-align: center
}
.bullets {
display: inline-block;
background-color: gray;
border: 1px solid #fff;
width: 15px;
height: 15px;
border-radius: 10px;
cursor: pointer;
transition: all 0.5s ease
}
.bullets:hover {
background-color: #e0dede
}
.bullets-show {
background-color: #f00;
-webkit-animation: boing 500ms forwards;
-moz-animation: boing 500ms forwards;
-o-animation: boing 500ms forwards;
animation: boing 500ms forwards
}
@keyframes boing {
0% { transform: scale(1.2) }
40% { transform: scale(.6) }
60% { transform: scale(1.2) }
80% { transform: scale(.8) }
100% { transform: scale(1) }
}
@keyframes myfadein {
0% { opacity: 0 }
100% { opacity: 1 }
}<div id="slideshow">
<div id="slide1" class="slide">
<div class="slide-contain">
<span>Image One</span>
</div>
</div>
<div id="slide2" class="slide">
<div class="slide-contain">
<span>Image Two</span>
</div>
</div>
<div id="slide3" class="slide">
<div class="slide-contain">
<span>Image Three</span>
</div>
</div>
<div id="slidebullet">
<div id="bullet1" class="bullets"></div>
<div id="bullet2" class="bullets"></div>
<div id="bullet3" class="bullets"></div>
</div>
<div id="arrow-left" class="arrow"></div>
<div id="arrow-right" class="arrow"></div>
</div>