任何人都可以帮助我解决我遇到的这个问题。
我有这个网站，它有一个编程的照片库功能。按一个箭头按钮，它将显示一系列图像中的下一个图像。按上一个箭头按钮，它将显示序列中的上一个图像。它所在的这个网页是专为桌面和移动设备设计的，因此它将根据网站所在的网站布局不同的网站。
照片库的功能在网站的移动版本上运行良好，但在网站的桌面版本上，它不会转到序列中的下一个图像。下面是它的桌面HTML代码
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++)
{
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}<div class="photoGallery" style="max-width:200%">
<img class="mySlides" src="../Images/Guy_Fawkes_SpriteSheet.jpg" style="width:100%">
<img class="mySlides" src="../Images/Parent_of_Baby_in_Pram_SpriteSheet.jpg" style="width:100%">
<img class="mySlides" src="../Images/Vampire_SpriteSheet.jpg" style="width:100%">
<img class="mySlides" src="../Images/Werewolf_SpriteSheet.jpg" style="width:100%">
<img class="mySlides" src="../Images/Teenage_Girl_School_SpriteSheet.jpg" style="width:100%">
<img class="mySlides" src="../Images/Teenage_Boy_School_SpriteSheet.jpg" style="width:100%">
<img class="mySlides" src="../Images/Thief_SpriteSheet.jpg" style="width:100%">
<img class="mySlides" src="../Images/Christmas_Elf_SpriteSheet.jpg" style="width:100%">
<img class="mySlides" src="../Images/Santa_Claus_SpriteSheet.jpg" style="width:100%">
<img class="mySlides" src="../Images/Game_Art_Employee_Skiving_Off_Work_Playing_On_Smartphone_SpriteSheet.jpg" style="width:100%">
<img class="mySlides" src="../Images/Game_Art_Main_Character_SpriteSheet.jpg" style="width:100%">
<img class="mySlides" src="../Images/Game_Art_Employee_Skiving_Off_Work_Playing_On_Smartphone.jpg" style="width:100%">
<img class="mySlides" src="../Images/Game_Art_Old_Man_With_Stick_Walking_Animated_SpriteSheet.jpg" style="width:100%">
<img class="mySlides" src="../Images/Game_Art_Old_Lady_With_Shopping_Basket_Animated_SpriteSheet.jpg" style="width:100%">
<img class="mySlides" src="../Images/Game_Art_Employee_Skiving_Off_Work_Playing_On_Smartphone_&_Smoking_Cigarette.jpg" style="width:100%">
<img class="mySlides" src="../Images/Till_Monkey_Main_Menu_Title_Screen.jpg" style="width:100%">
<img class="mySlides" src="../Images/Old_Lady_with_Shopping_Basket_Animated_GIF.gif" style="width:100%">
<img class="mySlides" src="../Images/Old_Man_With_Walking_Stick_Animated_GIF.gif" style="width:100%">
<img class="mySlides" src="../Images/Main_Character_Putting_Cash_in_Till_Animated_GIF.gif" style="width:100%">
<img class="mySlides" src="../Images/Main_Character_Tearing_Hair_Out_Animated_GIF.gif" style="width:100%">
<img class="mySlides" src="../Images/Skiving_Employee_Animated_GIF.gif" style="width:100%">
<img class="mySlides" src="../Images/Santa_Claus_Animated_GIF.gif" style="width:100%">
<img class="mySlides" src="../Images/Christmas_Elf_Animated_GIF.gif" style="width:100%">
<img class="mySlides" src="../Images/Thief_Animated_GIF.gif" style="width:100%">
<img class="mySlides" src="../Images/Teenage_School_Boy_Animated_GIF.gif" style="width:100%">
<img class="mySlides" src="../Images/Teenage_School_Girl_Animated_GIF.gif" style="width:100%">
<img class="mySlides" src="../Images/Werewolf_Animated_GIF.gif" style="width:100%">
<img class="mySlides" src="../Images/Parent_of_Baby_in_Pram_Animated_GIF.gif" style="width:100%">
<img class="mySlides" src="../Images/Vampire_Animated_GIF.gif" style="width:100%">
<img class="mySlides" src="../Images/Guy_Fawkes_Animated_GIF.gif" style="width:100%">
<img class="mySlides" src="../Images/Main_Menu_Concept_Art.jpg" style="width:100%">
<img class="mySlides" src="../Images/Baby_Crying.jpg" style="width:100%">
<img class="mySlides" src="../Images/Christmas_Elf.jpg" style="width:100%">
<img class="mySlides" src="../Images/Guy_Fawkes.jpg" style="width:100%">
<img class="mySlides" src="../Images/Santa_Claus.jpg" style="width:100%">
<img class="mySlides" src="../Images/Teenage_Boy_School.jpg" style="width:100%">
<img class="mySlides" src="../Images/Teenage_Girl_School.jpg" style="width:100%">
<img class="mySlides" src="../Images/Thief.jpg" style="width:100%">
<img class="mySlides" src="../Images/Vampire.jpg" style="width:100%">
<img class="mySlides" src="../Images/Werewolf.jpg" style="width:100%">
<img class="mySlides" src="../Images/Concept_Art_Till_&_Money.jpg" style="width:100%">
<img class="mySlides" src="../Images/Concept_Art_for_Main_Character_Tearing_Hair_Out.jpg" style="width:100%">
<img class="mySlides" src="../Images/Concept_Art_for_Old_Main_Walking.jpg" style="width:100%">
<img class="mySlides" src="../Images/Concept_Art_for_Hand.jpg" style="width:100%">
<img class="mySlides" src="../Images/Concept_Art_for_Old_Man.jpg" style="width:100%">
<img class="mySlides" src="../Images/Concept_Art_for_Old_Lady.jpg" style="width:100%">
<img class="mySlides" src="../Images/Concept_Art_for_Skiving_Employee.jpg" style="width:100%">
<img class="mySlides" src="../Images/Concept_Art_for_Skiving_Employee_Pic_2.jpg" style="width:100%">
<div class="leftButton" onclick="plusDivs(-1)"><img src="../Images/DesktopleftArrow.jpg" alt="left arrow"></div>
<div class="rightButton" onclick="plusDivs(1)"><img src="../Images/DesktoprightArrow.jpg" alt="left arrow"></div>
</div>
<script src="../JavaScript/DESKTOP_Photo_Gallery.js"></script>
Mobile HTML of it:
<div class="mobilephotoGallery" style="max-width:200%">
<img class="mobilemySlides" src="../Images/Guy_Fawkes_SpriteSheet.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Parent_of_Baby_in_Pram_SpriteSheet.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Vampire_SpriteSheet.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Werewolf_SpriteSheet.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Teenage_Girl_School_SpriteSheet.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Teenage_Boy_School_SpriteSheet.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Thief_SpriteSheet.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Christmas_Elf_SpriteSheet.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Santa_Claus_SpriteSheet.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Game_Art_Employee_Skiving_Off_Work_Playing_On_Smartphone_SpriteSheet.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Game_Art_Main_Character_SpriteSheet.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Game_Art_Employee_Skiving_Off_Work_Playing_On_Smartphone.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Game_Art_Old_Man_With_Stick_Walking_Animated_SpriteSheet.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Game_Art_Old_Lady_With_Shopping_Basket_Animated_SpriteSheet.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Game_Art_Employee_Skiving_Off_Work_Playing_On_Smartphone_&_Smoking_Cigarette.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Till_Monkey_Main_Menu_Title_Screen.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Old_Lady_with_Shopping_Basket_Animated_GIF.gif" style="width:100%">
<img class="mobilemySlides" src="../Images/Old_Man_With_Walking_Stick_Animated_GIF.gif" style="width:100%">
<img class="mobilemySlides" src="../Images/Main_Character_Putting_Cash_in_Till_Animated_GIF.gif" style="width:100%">
<img class="mobilemySlides" src="../Images/Main_Character_Tearing_Hair_Out_Animated_GIF.gif" style="width:100%">
<img class="mobilemySlides" src="../Images/Skiving_Employee_Animated_GIF.gif" style="width:100%">
<img class="mobilemySlides" src="../Images/Santa_Claus_Animated_GIF.gif" style="width:100%">
<img class="mobilemySlides" src="../Images/Christmas_Elf_Animated_GIF.gif" style="width:100%">
<img class="mobilemySlides" src="../Images/Thief_Animated_GIF.gif" style="width:100%">
<img class="mobilemySlides" src="../Images/Teenage_School_Boy_Animated_GIF.gif" style="width:100%">
<img class="mobilemySlides" src="../Images/Teenage_School_Girl_Animated_GIF.gif" style="width:100%">
<img class="mobilemySlides" src="../Images/Werewolf_Animated_GIF.gif" style="width:100%">
<img class="mobilemySlides" src="../Images/Parent_of_Baby_in_Pram_Animated_GIF.gif" style="width:100%">
<img class="mobilemySlides" src="../Images/Vampire_Animated_GIF.gif" style="width:100%">
<img class="mobilemySlides" src="../Images/Guy_Fawkes_Animated_GIF.gif" style="width:100%">
<img class="mobilemySlides" src="../Images/Main_Menu_Concept_Art.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Baby_Crying.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Christmas_Elf.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Guy_Fawkes.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Santa_Claus.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Teenage_Boy_School.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Teenage_Girl_School.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Thief.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Vampire.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Werewolf.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Concept_Art_Till_&_Money.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Concept_Art_for_Main_Character_Tearing_Hair_Out.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Concept_Art_for_Old_Main_Walking.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Concept_Art_for_Hand.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Concept_Art_for_Old_Man.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Concept_Art_for_Old_Lady.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Concept_Art_for_Skiving_Employee.jpg" style="width:100%">
<img class="mobilemySlides" src="../Images/Concept_Art_for_Skiving_Employee_Pic_2.jpg" style="width:100%">
<div class="mobileleftButton" onclick="plusDivs(-1)"><img src="../Images/DesktopleftArrow.jpg" alt="left arrow"></div>
<div class="mobilerightButton" onclick="plusDivs(1)"><img src="../Images/DesktoprightArrow.jpg" alt="left arrow"></div>
</div>
<script src="../JavaScript/Mobile_Photo_Gallery.js"></script>我在你的代码中看到，你只能使用“mySlides”类获取元素。
var x = document.querySelectorAll(".mySlides");
如果你想要定位“mobilemySlides”元素，你必须找到一种方法来告诉你的javascript你想要获得哪些元素。
例如，您可以向函数添加第二个参数
function showDivs(n, selector){ ... }
然后更新您的DOM查询：
var x = document.querySelectorAll(selector);
最后，调用showDivs函数：
<div class="leftButton" onclick="plusDivs(-1, '.mySlides')">
要么
<div class="leftButton" onclick="plusDivs(-1, '.mobilemySlides')">
这是一个工作的例子：https://codepen.io/mp-9007/pen/RdBwYb。我删除宽度100％只是为了让我们看得更清楚。
编辑基于@Scott Marcus评论的更新代码。为.getElementByClassName()改变了.querySelectorAll()