Question

我还在学习如何编码，而且我遇到了一个问题。我正在建立一个网站，我希望有多个图像滑块，虽然只有第一个正常工作，其他滑块上的图像不会显示。我想我错过了一些代码来完成这个，虽然我不知道是什么。我添加的代码是如何创建滑块。我的问题是如何使用此代码在一个html文件中创建多个滑块，其中所有工作。例如，复制滑块并在同一文件中粘贴一个新文件，其中所有滑块都可以使用不同的图像。非常感谢帮助。

＆＃13;

var slideIndex = 1;
        showSlides(slideIndex);
        function plusSlides(n){
            showSlides(slideIndex += n);
        }
        function currentSlide(n){
            showSlides(slideIndex = n);
        }
        function showSlides(n){
            var i;
            var slides = document.getElementsByClassName("mySlides");
            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";
        }

＆＃13;

.slideshowContainer{
	width:43.2em;
	height:23.15em;
	margin-top:1.5em;
	margin-left:1.5em;
	background-color:#FFF;
	box-shadow: -0.05em 0em 0.5em 0.05em rgba(0,0,0,0.4);
	-webkit-box-shadow: -0.05em 0em 0.5em 0.05em rgba(0,0,0,0.4);
	-moz-box-shadow: -0.05em 0em 0.5em 0.05em rgba(0,0,0,0.4);
}

.mySlides{
	display: none;
}

a.right{
	cursor: pointer;
	padding: 15px;
	float: right;
	color: #FFF;
	margin-top:-268px;
	z-index:1;
	position:relative;
	border-radius: 3px 0 0 3px;
}

a.left{
	cursor: pointer;
	padding: 15px;
	float: left;
	color: #FFF;
	margin-top:-268px;
	z-index:1;
	position:relative;
	border-radius: 0 3px 3px 0;
}

a.right:hover, a.left:hover{
	background-color: rgba(0,0,0,0.8);
}

.dot{
	cursor: pointer;
	height: 12px;
	width: 12px;
	margin-bottom:5px;
	background-color: #BBB;
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
}

.dotsCenter{
	text-align: center;
}

.active, .dot:hover{
	background-color: #717171;
}

.fade{
	-webkit-animation-name: fade;
	-webkit-animation-duration: 0.8s;
	animation-name: fade;
	animation-duration: 0.8s;
}

@-webkit-keyframes fade{
	from{
		opacity: 0.6;
	}
	to{
		opacity: 1;
	}
}

@keyframes fade{
	from{
		opacity: 0.6;
	}
	to{
		opacity: 1;
	}
}

＆＃13;

<div class="slideshowContainer">
                    <div class="mySlides fade">
                        <img src="exampel1.jpg">
                    </div>
                    
                    <div class="mySlides fade">
                        <img src="exampel2.jpg">
                    </div>
                    
                    <div class="mySlides fade">
                        <img src="exampel3.jpg">
                    </div>
                    
                    <div class="mySlides fade">
                        <img src="exampel4.jpg">
                    </div>
                    
                    <div class="mySlides fade">
                        <img src="exampel5.jpg">
                    </div>
                    
                    <a class="left" onclick="plusSlides(-1)">&#10094;</a>
                    <a class="right" onclick="plusSlides(1)">&#10095;</a>
                    
                    <div class="dotsCenter">
                        <span class="dot" onclick="currentSlide(1)"></span>
                        <span class="dot" onclick="currentSlide(2)"></span>
                        <span class="dot" onclick="currentSlide(3)"></span>
                        <span class="dot" onclick="currentSlide(4)"></span>
                        <span class="dot" onclick="currentSlide(5)"></span>
                    </div>
                </div>

＆＃13;

Answer 1

由于像这样的行

，复制代码将无法正常工作

var slides = document.getElementsByClassName("mySlides");

这将影响所有滑块，因为它们都具有类mySlides的元素。

更改所有代码（html，css，js）中的所有类名和ID应该有效。但是，首先理解您的代码当然要好一些，以便您可以更有效地重复使用它。

一个html文件中有多个滑块

1 个答案: