كيفية عرض صور عشوائية باستخدام JavaScript

مرحباً @Ali Kangooni
إذا كنت تريد عرض ثلاث صور مثلاً و عند الضغط على أحد هذه الصور تقوم بعرض صورة من 3 صور أخرى تكون مخفية و تريد عرض هذه الصورة عشوائياً يُمكنك إستخدام هذه الطريقة:
اولاً تقوم بإضافة كافة الصور إلى صفحة ال html الخاصة بك بهذا الشكل مثلا:

<img id="img_1" src="https://via.placeholder.com/200?text=1" alt="صورة 1">
<img id="img_2" src="https://via.placeholder.com/200?text=2" alt="صورة 2">
<img id="img_3" src="https://via.placeholder.com/200?text=3" alt="صورة 3">
<img id="img_4" src="https://via.placeholder.com/200?text=4" alt="صورة 4">
<img id="img_5" src="https://via.placeholder.com/200?text=5" alt="صورة 5">
<img id="img_6" src="https://via.placeholder.com/200?text=6" alt="صورة 6">

هنا قمنا بإستعمال موقع placeholder لإضافة صور للصفحة كما قمنا بإعطاء كل صورة مُعرف id خاص بها و ستظهر الصور بهذا الشكل: 

ثانياً نقوم بإخفاء الصور 4 و 5 و 6 و ذلك بإستخدام خاصية display و نقوم بإعطائهم الصنف المُشترك hidden كي نستطيع تحديدهم لاحقاً بالجافاسكربت بهذا الشكل:

<img id="img_4" class="hidden" style="display: none;" src="https://via.placeholder.com/200?text=4" alt="صورة 4">
<img id="img_5" class="hidden" style="display: none;"  src="https://via.placeholder.com/200?text=5" alt="صورة 5">
<img id="img_6" class="hidden" style="display: none;" src="https://via.placeholder.com/200?text=6" alt="صورة 6">

ثالثاً نقوم بإعطاء الصنف clicked_img للصور 1 و 2 و 3 لأننا سنستخدمه في الجافاسكربت أيضا بهذا الشكل:

<img id="img_1" class="clicked_img" src="https://via.placeholder.com/200?text=1" alt="صورة 1">
<img id="img_2" class="clicked_img"  src="https://via.placeholder.com/200?text=2" alt="صورة 2">
<img id="img_3" class="clicked_img" src="https://via.placeholder.com/200?text=3" alt="صورة 3">

الآن الصفحة تحمل 6 صور 3 منهم معروضة و 3 مخفية .
رابعاً ننتقل إلى جزء الجافاسكرت و سنستخدم مكتبة jQuery لأنها ستُسهل كتابة الشيفرات لذلك سنقوم بتضمينها أولاً بهذا الشكل:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

function randomInteger(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

$('.clicked_img').on('click', function() { // clicked_imgبمعنى قم بالتسمع لحدث النقر على أي من العناصر التي تحمل الصنف 
  $('.hidden').hide(); // في حالة حدوث الحدث قم بإخفاء أي عنصر يحمل الصنف hidden
  var rand = randomInteger(4, 6); // إستدعاء الدالة السابقة لجلب رقم عشوائي من 4 إلى 6 
  $('#img_' + rand).show(); // بالإستعانة بالرقم العشوائي نكون مُعرف أحد الصور المخفية و نقوم بتحديد العنصر و إظهاره
})

$('.hidden').on('click', function() {
  $(this).hide();
})

مرحبًا @Ali Kangooni

في البداية يجب عليك تحديد الصورة التي سوف تظهر عند فتح المستخدم للصفحة وتحديد التنسيقات الخاصة بها مع تعريفها ب id خاص بها وليكن هنا imgClickAndChange

 <img alt="" src="صورة 1" style="height: 85px; width: 198px" id="imgClickAndChange" onclick="changeImage()"  />

ثم عليك إضافة تابع الجافا سكريبت الذي يقوم بتحويل الصورة وفقًا لل id الذي عرفناه داخل عنصر الصورة img

<script>
    function changeImage() {
      //إذا كانت الصورة 1 هي في الواجهة وام الضغط عليها حولها للصورة 5

        if (document.getElementById("imgClickAndChange").src == "صورة 1") 
        {
            document.getElementById("imgClickAndChange").src = "صورة 5";
        }
      //إذا كانت الصورة 5 هي في الواجهة وام الضغط عليها حولها للصورة 4
        else if (document.getElementById("imgClickAndChange").src = "صورة 5");
        {
            document.getElementById("imgClickAndChange").src = "صورة 4";
        }
       //إذا كانت الصورة 4 هي في الواجهة وام الضغط عليها حولها للصورة 6
      	else if (document.getElementById("imgClickAndChange").src = "صورة 4");
        {
            document.getElementById("imgClickAndChange").src = "صورة 6";
        }
      // وإلا فأظهر الصورة 1
      	else 
        {
            document.getElementById("imgClickAndChange").src = "صورة 1";
        }
      
      
    }
</script>

كما يمكنك التوليد العشوائي لأرقام الصور من خلال استخدام تابع random لتوليد الأرقام العشوائية.

function changeImage(){
                imageId = Math.floor(Math.random()*3)+1;
                
                document.getElememtById("imgClickAndChange").innerHTML = 
                    "<img src='صورة" + imageId + ".jpg'/>";
                }
          }

هناك العديد من الطرق لعرض صور عشوائية بإستخدام js، و هناك أيضًا أكواد و مكتبات جاهزة توفر لنا هذا الغرض، لكن دعني أطرح عليك طريقة سهلة و بسيطة بإذن الله و هي عن طريق إستخدام الـArray.

لا تقلق، الطريقة بسيطة ولكن سأوضحها لك بالتفصيل حتى تتمكن من فهمها و التعديل عليها إن أردت ذلك.

1. نجهز كود صفحة الـ HTML و نرفق صورة بإستخدام img :

<!DOCTYPE html>
<html>
<head>
     <title>Random Image</title>
     <script src="script10.js"></script>
     <link rel="stylesheet" href="script01.css">
</head>
<body>
     <img src="images/spacer.gif" width="305" height="312" id="myPicture" alt="some image">
</body>
</html>

2. في ملف الـ js، ننشأ Array و خزن بداخلها أسماء الصور المراد عرضها بشكل عشوائي داخل الموقع :

var myPix = new Array("images/lion.jpg", "images/tiger.jpg", "images/bear.jpg");

3. نقوم بتوليد رقم عشوائي بحيث لا يتجاوز حجم الـArray، أي أنه نريد أن نأتي برقم عشوائي من 0 إلى 2، سنقوم بهذه العملية بإستخدام Math.random() لتوليد رقم عشوائي من ثم نقوم بضربه بطول الـ Array، فنحصل على رقم لا يقل عن 0 ولا يزيد عن 2 ، ولنضمن أن يتم توليد رقم صحيح نقوم بتقريب هذا الرقم إلى أقرب عدد صحيح بإستخدام الدالة Math.floor() :

var randomNum = Math.floor(Math.random() * myPix.length);

4. نقوم بالإتصال مع صفحة الـ HTML و الوصول للصورة التي وضعناها و نقوم بالتعديل على الصورة المرفقة، من خلال إختيار صورة عشوائية من التي أرفقناهم في الـ Array و نضعها في الـ src الخاص بالصورة المرفقة في ملف الـ HTML و يتم عرضها، الوصول للصورة يتم عن طريق getElementById، و إختيار صورة من الـ Array يكون بالإستعانة بالرقم الذي تم توليده عشوائيًا و هنا سوف يمثل إندكس معين في الـ Array :

document.getElementById("myPicture").src = myPix[randomNum];

5. أخيرًا، نقوم بعمل function لتنفيذ هذه الأوامر و نقوم أيضًا بتنفيذها عند تحميل الصفحة، ويصبح الكود كامل بالشكل التالي :

window.onload = choosePic;

var myPix = new Array("images/lion.jpg","images/tiger.jpg","images/bear.jpg");

function choosePic() {
     var randomNum = Math.floor(Math.random() * myPix.length);
     document.getElementById("myPicture").src = myPix[randomNum];
}

و لتتمكن من تنفيذ طلبك كما هو موضح بسؤالك، يمكنك بدلًا من أن تجعل البرنامج يولد رقم عشوائي لإختيار إندكس معين، يمكنك أن تستقبل هذا الرقم من المستخدم، و ترفقه مكان الـ randomNum.

مرحباً بك ,  
هذا يعتمد على المسار الذي تقوم بتعريفه لكل صورة ، و لتفعيل عملية النقر على الصورة يجب  عليك استخدام وسم <a> . 
 

ثم بتعريف المسار الذي ترغب بأخذ السمتخدم له بعد النقر على الصورة داخل 
 href 

<a href ="#">
  قم يتحديد مسار الصورة التي تريد أن تظر داخل 
  src
  <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
</a>

شكراً لك 

إضافة لشرح زملائي المدربين في حال لم يتم تطبيق فكرتك 100%

لنفرض لديك مجموعة الأعداد (4,5,6) وتريد في كل مرة اختيار عدد منهم مختلف و عدم تكرار الاختيار حتى انتهاء المجموعة.

قم بتعريف مصفوفة Array تحوي العناصر التي تريد الإختيار منها, تابع التهيئة, تابع اختيار رقم عشوائي من المصفوفة, تابع اختيار صورة.

var arr; // مجموعة الأعداد التي ستختار منها عشوائيا

// تابع التهيئة الذي يسند القيم للمصفوفة
function initialize(n,m) {     // التهيئة بإضافة أعداد محددة برمجيا للمجموعة
  if (m > n) 
    [a, b] = [b, a];    // تبديل قيم المتحولين للتأكد من بداية و نهاية المجال لتعمل الحلقة بطريقة صحيحة
  for (let i=n; i<=m ; i++){
  	arr.push(i);       // إضافة العناصر للمصفوفة
  }
}

// تابع اختيار رقم عشوائي من المصفوفة
function randomInteger() { 
    // نختار عدد بين 1 و عدد عناصر المصفوفة ثم نطرح منه 1 لنحصل على دليل العنصر
	return Math.ceil(Math.random() * arr.length) -1;
}

// التابع الذي سيختار رقم الصورة التي سوف نعرضها 
function choose() {
  if (arr.length == 0)    // في حال كانت المصفوفة فارغة نقوم بتهيئتها
    initialize(4,6);
  let x = randomInteger(); // اختيار دليل عنصر عشوائي ضمن المصفوفة
  arr.splice(x, 1);     // حذف عنصر ذو دليل محدد من المصفوفة
  return arr[x];    // نعيد رقم الصورة التي سوف نعرضها
}

قم بتعريف ال HTML و CSS و jQuery كما قام به المدرب عبود سمير