任何人都可以帮我解决这个问题。
我有这个网站，其中包含一个编程的照片库功能。您按下一个箭头按钮，它将以一系列图像显示下一个图像。按以前的箭头按钮，它将从序列显示上图。它使用的网页是为桌面和移动设备设计的，因此它将根据其使用的设备而不同。
。照片库的功能在网站的移动版本上运行良好，但是在网站的桌面版本上，它不会转到序列中的下一个图像。以下是桌面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()的CC_1