如何在 jQuery 中创建一个计数器变量，当用户单击左右箭头按钮时更改图像？
[英]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?
问题描述
我需要弄清楚如何增加和减少计数器变量，以便当用户单击右箭头按钮时，图像将 go 到第二个图像（#image2）然后是第三个图像（#image3），当用户点击左箭头按钮图像将 go 回到上一个图像。 我是 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>
1 个解决方案
解决方案1
0 2022-01-03 19:44:59
考虑以下示例。
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"> < </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"> > </button> </div>
仅当您拥有大型数据集（例如图像路径数组）时才真正需要索引。 然后更容易拥有索引，以便您可以更好地在数组中移动。
使用图像元素列表，其中只有一个可见，这实质上成为您的索引。 对于左/右箭头，隐藏当前元素，您可以使用.prev()和.next()显示下一个元素。 对于直接点击，它们的顺序相同，因此很容易获取缩略图的.index() ，隐藏所有其他内容，并显示该特定图像。
如果您必须使用计数器，您仍然可以使用相同的代码执行此操作。
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"> < </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"> > </button> </div>
如何在右边的指令框上做一个箭头，以指向焦点对准的左边字段？
[英]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 the horizontal bar hidden and make left and right buttons to scroll horizontally?
用户使用香草javascript单击右/左可点击图像时如何执行滚动机制
[英]How to execute a scroll mechanism when user clicks right/left clickable image using vanilla javascript
当用户单击div时，如何将变量传递给加载的局部变量？
[英]How can I pass a variable to a partial that is loaded when user clicks on a div?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.