簡單的Javascript圖像交換

我有一個包含18個鏈接列表的頁面，點擊鏈接主要部分圖片必須更改。默認情況下，第一張圖片可見。我知道這是可以做到的。請幫幫我。謝謝 kristtee簡單的Javascript圖像交換

2017-08-01 Krish Raja

請分享你現在所做的一切。 – MKR

這應該足以讓你朝着正確的方向前進。這個特殊的例子使用jQuery，並且只是實現類似這樣的許多方法之一。

<!DOCTYPE html> 
    <html> 
     <head> 
      <style> 
       .main img { 
        width: 500px; 
        height: 500px; 
       } 

       .thumbs img { 
        width: 50px; 
        height: 50px; 
        cursor: pointer; 
       } 
      </style> 
     </head> 
     <body> 
      <div class="main"> 
       <img src="https://static.pexels.com/photos/20787/pexels-photo.jpg" alt="cat"> 
      </div> 

      <div class="thumbs"> 
       <img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" alt="cat"> 
       <img src="https://newevolutiondesigns.com/images/freebies/cat-wallpaper-24.jpg" alt="cat"> 
       <img src="https://newevolutiondesigns.com/images/freebies/cat-wallpaper-7.jpg" alt="cat"> 
      </div> 

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
      <script> 
       $(document).ready(function(){ 
        $('.thumbs img').on('click', function(){ 
         var src = $(this).attr('src'); 
         $('.main img').attr('src', src); 
        }) 
       }) 
      </script> 
     </body> 
    </html>

來源

2017-08-01 06:20:06 eulloa

簡單的Javascript圖像交換

回答

相關問題