シンプルなJavaScriptの画像交換

サイドバーに18個のリンクがリストされたページがあり、リンクのメインセクションの画像をクリックすると変更する必要があります。デフォルトでは、最初の画像が表示されます。私はそれができることを知っている。私を助けてください。ありがとう kristteeシンプルなJavaScriptの画像交換

出典

2017-08-01 Krish Raja

これまでのことを分かち合いましょう。 – MKR

これはあなたが正しい方向に動くのに十分であるはずです。この特定の例では、jQueryを使用し、このようなものを実装する多くの方法の1つにすぎません。

<!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の画像交換

答えて

関連する問題