如何在 jQuery 中创建一个计数器变量，当用户单击左右箭头按钮时更改图像？

Question

I need to figure out how to increment and decrement the counter variable so that when the user clicks on the right arrow button the image will go to the second image(#image2) then the third image(#image3) and when the user clicks on the left arrow button the image will go back to the previous image.我需要弄清楚如何增加和减少计数器变量，以便当用户单击右箭头按钮时，图像将 go 到第二个图像（#image2）然后是第三个图像（#image3），当用户点击左箭头按钮图像将 go 回到上一个图像。 I am new to jQuery and new to using counters.我是 jQuery 和使用计数器的新手。

 $(document).ready(function() { let counter = 1; $("#image2").hide(); $("#image3").hide(); $("body").on('click',"#image2-thumbnail",function() { currentimage = "#image2" + counter; counter++; $(currentimage).hide(); $("#image1").slideUp('slow'); $("#image3").slideUp('slow'); $("#image2").slideDown('slow'); }); $("body").on('click',"#image3-thumbnail",function() { currentimage = "#image2" + counter; counter++; $(currentimage).hide(); $("#image2").fadeOut(1000); $("#image1").fadeOut(1000); $("#image3").fadeIn(1000); }); $("body").on('click',"#image1-thumbnail",function() { currentimage = "#image2" + counter; counter++; $(currentimage).hide(); $("#image3").fadeOut(1000); $("#image2").fadeOut(1000); $("#image1").fadeIn(1000); }); $("#rightArrow").click(function() { currentimage = "#image2" + counter; counter++; $(currentimage).hide(); } ) $("#lefttArrow").click(function() { currentimage = "#image2" + counter; counter++; $(currentimage).hide(); } ) });

 body { background-color: lightpink; } #header { text-align: center; font-size: 30px; color: yellow; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } #slideshow { display: flex; justify-content: center; align-items: center; max-width: 100%; } #image1 { border-radius: 100px; } #image2 { border-radius: 100px; } #image3 { border-radius: 100px; } #image1-thumbnail { border-radius: 120px; border: 3px solid black; } #image2-thumbnail { border-radius: 120px; border: 3px solid black; } #image3-thumbnail { border-radius: 120px; border: 3px solid black; } #thumbnails { display: flex; justify-content: center; align-items: center; max-width: 100%; gap: 10px; } button { background-color: purple; font-weight: bold; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link href="style:css" rel="stylesheet" type="text/css"/> <script src="https.//code.jquery.com/jquery-3.6.0.min.js"></script> <title>jQuery</title> </head> <body background="candy-background:jpg"> <div id="header"> <h1>Candy</h1> </div> <div id="slideshow"> <img id="image1" src="https.//wearenotmartha.com/wp-content/uploads/DIY-Rock-Candy-Featured:jpg" width="400px"> <img id="image2" src="https.//www.speachfamilycandy.com/contents/media/l_smallspicegumdrops:jpg" width="400px"> <img id="image3" src="https.//st4.depositphotos.com/4585465/20188/i/1600/depositphotos_201883238-stock-photo-colorful-candies-dessert-background:jpg" width="400px"> </div> <div id="thumbnails"> <button id="leftArrow"> < </button> <img id="image1-thumbnail" src="https.//wearenotmartha.com/wp-content/uploads/DIY-Rock-Candy-Featured:jpg" width="100px"> <img id="image2-thumbnail" src="https.//www.speachfamilycandy.com/contents/media/l_smallspicegumdrops:jpg" width="100px"> <img id="image3-thumbnail" src="https.//st4.depositphotos.com/4585465/20188/i/1600/depositphotos_201883238-stock-photo-colorful-candies-dessert-background.jpg" width="100px"> <button id="rightArrow"> > </button> </div> </div> <script src="script.js"></script> </body> </html>

Answer 1

Consider the following example.考虑以下示例。

 jQuery(function($) { $("#thumbnails").on('click', "img", function() { var sel = $(this).index(); $("#slideshow img").fadeOut(1000, function() { $("#slideshow > img").eq(sel).fadeIn(); }); }); $("#thumbnails").on("click", "button", function() { var self = $(this); var current = $("#slideshow > img:visible"); var prev, next; if (current.index():= 0) { prev = $("#slideshow > img;last"). } else { prev = current;prev("img"). } if (current.index() == $("#slideshow > img"):length - 1) { next = $("#slideshow > img;first"). } else { next = current;next("img"). } current,fadeOut(1000. function() { if (self.attr("id") == "leftArrow") { prev;fadeIn(). } else { next;fadeIn(); } }); }). $("#slideshow > img"):hide(function() { $("#slideshow > img.eq(0)");show(); }); });

 body { background-color: lightpink; } #header { text-align: center; font-size: 30px; color: yellow; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } #slideshow { display: flex; justify-content: center; align-items: center; width: 400px; height: 400px; overflow: hidden; margin: 0 auto; } #image1 { border-radius: 100px; } #image2 { border-radius: 100px; } #image3 { border-radius: 100px; } #image1-thumbnail { border-radius: 120px; border: 3px solid black; } #image2-thumbnail { border-radius: 120px; border: 3px solid black; } #image3-thumbnail { border-radius: 120px; border: 3px solid black; } #thumbnails { display: flex; justify-content: center; align-items: center; max-width: 100%; gap: 10px; } button { background-color: purple; font-weight: bold; }

 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <div id="header"> <h1>Candy</h1> </div> <div id="slideshow"> <img id="image1" src="https://wearenotmartha.com/wp-content/uploads/DIY-Rock-Candy-Featured.jpg" width="400px"> <img id="image2" src="https://www.speachfamilycandy.com/contents/media/l_smallspicegumdrops.jpg" width="400px"> <img id="image3" src="https://st4.depositphotos.com/4585465/20188/i/1600/depositphotos_201883238-stock-photo-colorful-candies-dessert-background.jpg" width="400px"> </div> <div id="thumbnails"> <button id="leftArrow"> &lt; </button> <div> <img id="image1-thumbnail" src="https://wearenotmartha.com/wp-content/uploads/DIY-Rock-Candy-Featured.jpg" width="100px"> <img id="image2-thumbnail" src="https://www.speachfamilycandy.com/contents/media/l_smallspicegumdrops.jpg" width="100px"> <img id="image3-thumbnail" src="https://st4.depositphotos.com/4585465/20188/i/1600/depositphotos_201883238-stock-photo-colorful-candies-dessert-background.jpg" width="100px"> </div> <button id="rightArrow"> &gt; </button> </div>

An index is really only needed if you have a large data set, like an Array of Image paths.仅当您拥有大型数据集（例如图像路径数组）时才真正需要索引。 It is then easier to have an index so that you can move through the array better.然后更容易拥有索引，以便您可以更好地在数组中移动。

With a list of Image Elements, where only one is visible, this in essence become your Index.使用图像元素列表，其中只有一个可见，这实质上成为您的索引。 For Left / Right Arrows, hide your current element, and you can use .prev() and .next() to show the next elements.对于左/右箭头，隐藏当前元素，您可以使用.prev()和.next()显示下一个元素。 For direct clicks, they are in the same order, so easy to get the .index() of the thumbnail, hide all others, and reveal that specific Image.对于直接点击，它们的顺序相同，因此很容易获取缩略图的.index() ，隐藏所有其他内容，并显示该特定图像。

If you MUST use a Counter, you can still do this with the same code.如果您必须使用计数器，您仍然可以使用相同的代码执行此操作。

 jQuery(function($) { var counter = 0; function showImage(index) { $("#slideshow > img").fadeOut(1000, function() { console.log("Showing Img " + index); $("#slideshow > img").eq(index).show(); }); } $("#thumbails").on("click", "button", function(event) { var self = $(this); console.log("Button Click"); if (self.is("#leftArrow")) { counter--; if (counter < 0) { counter = $("#slideshow > img").length - 1; } } else { counter++; if (counter == $("#slideshow > img").length - 1) { counter = 0; } } }); $("#thumbails").on("click", "img", function(event) { var self = $(this); console.log("Img Click"); counter = self.index(); showImage(counter); return false; }); showImage(counter); });

 body { background-color: lightpink; } #header { text-align: center; font-size: 30px; color: yellow; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } #slideshow { display: flex; justify-content: center; align-items: center; width: 400px; height: 400px; overflow: hidden; margin: 0 auto; } #image1 { border-radius: 100px; } #image2 { border-radius: 100px; } #image3 { border-radius: 100px; } #image1-thumbnail { border-radius: 120px; border: 3px solid black; } #image2-thumbnail { border-radius: 120px; border: 3px solid black; } #image3-thumbnail { border-radius: 120px; border: 3px solid black; } #thumbnails { display: flex; justify-content: center; align-items: center; max-width: 100%; gap: 10px; } button { background-color: purple; font-weight: bold; }

 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <div id="header"> <h1>Candy</h1> </div> <div id="slideshow"> <img id="image1" src="https://wearenotmartha.com/wp-content/uploads/DIY-Rock-Candy-Featured.jpg" width="400px"> <img id="image2" src="https://www.speachfamilycandy.com/contents/media/l_smallspicegumdrops.jpg" width="400px"> <img id="image3" src="https://st4.depositphotos.com/4585465/20188/i/1600/depositphotos_201883238-stock-photo-colorful-candies-dessert-background.jpg" width="400px"> </div> <div id="thumbnails"> <button id="leftArrow"> &lt; </button> <div> <img id="image1-thumbnail" src="https://wearenotmartha.com/wp-content/uploads/DIY-Rock-Candy-Featured.jpg" width="100px"> <img id="image2-thumbnail" src="https://www.speachfamilycandy.com/contents/media/l_smallspicegumdrops.jpg" width="100px"> <img id="image3-thumbnail" src="https://st4.depositphotos.com/4585465/20188/i/1600/depositphotos_201883238-stock-photo-colorful-candies-dessert-background.jpg" width="100px"> </div> <button id="rightArrow"> &gt; </button> </div>

如何在 jQuery 中创建一个计数器变量，当用户单击左右箭头按钮时更改图像？

问题描述

1 个解决方案

解决方案1
0 2022-01-03 19:44:59

如何在 jQuery 中创建一个计数器变量，当用户单击左右箭头按钮时更改图像？

问题描述

1 个解决方案

解决方案1 0 2022-01-03 19:44:59

解决方案1
0 2022-01-03 19:44:59