stackoom
  简体   繁体   中英

How can I make a counter variable in jQuery that changes the images when the user clicks on the right and and left arrow buttons?

 原文  2022-01-03 18:44:17  8   1    javascript/ 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. I am new to jQuery and new to using counters. 

 $(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>

1 answers

solution1
 0  2022-01-03 19:44:59

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. 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.

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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How can I make an ajax call when user clicks on a Tab? How can I make an arrow on an instruction box on the right move to point to the field on the left that is in focus? How can I make my left/right arrow stem appear on hover? How can I make this jQuery carousel scroll right instead of left? How can I make the horizontal bar hidden and make left and right buttons to scroll horizontally? How to add scroll arrow buttons to left and right scroll wheel how to create image slider with left and right arrow buttons in bootstrap How can I passing partial array to left and right Gallery buttons? How to execute a scroll mechanism when user clicks right/left clickable image using vanilla javascript How can I pass a variable to a partial that is loaded when user clicks on a div?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM