لتحقيق الهدف الذي ذكرته، يمكنك استخدام متغير لتتبع الصورة الحالية وتغييرها بعد النقر. في الكود الحالي، تقوم بتغيير الخلفية مباشرة دون أن تتبع الصورة الحالية. فيما يلي كيفية تنفيذ ذلك:
javascript$(document).ready(function () {
var images = [
'url(images/sail-boat.jpg)',
'url(images/sad_ostateczny.jpg)',
'url(images/twierdza_wisloujscie.jpg)'
];
var currentImageIndex = 0;
$('.right').click(function () {
$('.zur-gda-img').css('background', images[currentImageIndex]);
currentImageIndex = (currentImageIndex + 1) % images.length;
});
});
هذا الكود يستخدم مصفوفة من الصور ومتغير لتتبع الصورة الحالية، ثم يقوم بتغيير الصورة عند النقر على الزر.
-
تعطيل إعادة تحجيم حقل النص في تطوير الويب30/01/2024
-
حل مشكلة jQuery في الصفحة05/04/2024
-
تنسيق التواريخ في JavaScript: دليل شامل27/02/2024
المزيد من المعلومات
بالطبع! في الكود السابق، قمت بتعريف مصفوفة images
تحتوي على عناوين الصور التي تريد استخدامها كخلفية للعنصر zur-gda-img
. ثم، قمت بتعريف متغير currentImageIndex
لتتبع الصورة الحالية المعروضة.
عند النقر على العنصر .right
، يتم تغيير خلفية العنصر zur-gda-img
لتكون الصورة في موضع currentImageIndex
في المصفوفة images
. بعد ذلك، يتم زيادة قيمة currentImageIndex
بمقدار واحد باستخدام عبارة (currentImageIndex + 1) % images.length
، وهذا يحول دوريًا بين الصور المتاحة.
بهذه الطريقة، يمكنك الحصول على تغيير الصور تلقائيًا بعد النقر، حيث سيتم عرض الصورة التالية في كل مرة تنقر فيها على العنصر.