我做了一个可滚动的画廊与本教程:https://www.youtube.com/watch?v=gzXyRa7jwk4&list=PLQthIda1maZcb0ADbOVT4mRYQVHLqSxqL&index=3&t=1s&ab_channel=GreatStack它的作品在我的第一个画廊罚款,但是,如果我试图将脚本应用到其他两个画廊,他们不滚动在所有
下面是运行的代码
let scrollContainer= document.querySelector (".gallery")
let arrowLeft = document.getElementById("arrowLeft")
let arrowRight = document.getElementById("arrowRight")
scrollContainer.addEventListener ("wheel", (evt) => {
evt.preventDefault ();
scrollContainer.scrollLeft +=evt.deltaY;
});
arrowLeft.addEventListener ("click", () => {
scrollContainer.style.scrollBehavior = "smooth";
scrollContainer.scrollLeft -= 900;
});
arrowRight.addEventListener ("click", () => {
scrollContainer.style.scrollBehavior = "smooth";
scrollContainer.scrollLeft += 900;
});
个字符
如前所述,它的工作,但是,如果我复制画廊和脚本和给予他们不同的类和ID(如.gallery2
而不是.gallery
)不知何故,它不工作。
let scrollContainer= document.querySelector (".gallery2")
let arrowLeft2 = document.getElementById("arrowLeft2")
let arrowRight2 = document.getElementById("arrowRight2")
scrollContainer.addEventListener ("wheel", (evt) => {
evt.preventDefault ();
scrollContainer.scrollLeft +=evt.deltaY;
});
arrowLeft2.addEventListener ("click", () => {
scrollContainer.style.scrollBehavior = "smooth";
scrollContainer.scrollLeft -= 900;
});
arrowRight2.addEventListener ("click", () => {
scrollContainer.style.scrollBehavior = "smooth";
scrollContainer.scrollLeft += 900;
});
<section id="Cocktails">
<h2>
Cocktails
</h2>
<div class="gallery-wrap2">
<img id="arrowLeft2" src="images/arrow_left.jpg">
<div class="gallery2">
<div>
<span >
<a href="https://www.hdm-stuttgart.de/">
<img src="images/audiovisualmedia.jpg">
<p> Placeholder</p>
</a>
</span>
<span>
<img src="images/hdm.jpg">
</span>
<span>
<img src="images/hdm_building.jpg">
</span>
<span>
<img src="images/mobilemedia.jpg">
</div>
<div>
<span>
<img src="images/audiovisualmedia.jpg">
</span>
<span>
<img src="images/hdm.jpg">
</span>
<span>
<img src="images/hdm_building.jpg">
</span>
<span>
<img src="images/mobilemedia.jpg">
</div>
</div>
<img id="arrowRight2"src="images/arrow_right.png">
</div>
</section>
的字符串
你知道我该怎么补救吗?
1条答案
按热度按时间o75abkj41#
所以我找到了一个非常简单的解决方案。我需要在js中为每个画廊重命名
scrollContainer
变量。所以对于.gallery2
,我创造性地将其重命名为scrollContainer2
:字符串
所有的画廊现在工作,并可滚动