Bootstrap――carousel（写真ルーレット）

13173 ワード
ブックストリーム
勉強しています。公式文書が素晴らしいと言わなければなりません。私はこれまで知らなかった人には全部手に入れることができます。
carouselに関する公式文書はここです。
http://www.bootcss.com/javascript.html#carousel 

  
  
  
  
    
   
   
   
   
  1. <!DOCTYPE html> 
    2. 
   
   
   
   
  2. <html> 
    3. 
   
   
   
   
  3.   <head> 
    4. 
   
   
   
   
  4.     <link rel="stylesheet" type="text/css" href="css/bootstrap.css">     
    5. 
   
   
   
   
  5.   </head> 
    6. 
   
   
   
   
  6.  
    7. 
   
   
   
   
  7.   <body> 
    8. 
   
   
   
   
  8.     <div id="myCarousel" class="carousel slide"> 
    9. 
   
   
   
   
  9.     <ol class="carousel-indicators"> 
    10. 
   
   
   
   
  10.       <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
    11. 
   
   
   
   
  11.        <li data-target="#myCarousel" data-slide-to="1"></li> 
    12. 
   
   
   
   
  12.                   <li data-target="#myCarousel" data-slide-to="2"></li> 
    13. 
   
   
   
   
  13.     </ol> 
    14. 
   
   
   
   
  14.       <div class="carousel-inner"> 
    15. 
   
   
   
   
  15.                   <div class="item active"> 
    16. 
   
   
   
   
  16.                     <img src="img1.jpg" alt=""> 
    17. 
   
   
   
   
  17.                     <div class="carousel-caption"> 
    18. 
   
   
   
   
  18.                       <h4>First Thumbnail label</h4> 
    19. 
   
   
   
   
  19.                       <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
    20. 
   
   
   
   
  20.                     </div> 
    21. 
   
   
   
   
  21.                   </div> 
    22. 
   
   
   
   
  22.         <div class="item"> 
    23. 
   
   
   
   
  23.         <img src="img2.jpg" alt=""> 
    24. 
   
   
   
   
  24.             <div class="carousel-caption"> 
    25. 
   
   
   
   
  25.                <h4>Second Thumbnail label</h4> 
    26. 
   
   
   
   
  26.                <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
    27. 
   
   
   
   
  27.             </div> 
    28. 
   
   
   
   
  28.         </div> 
    29. 
   
   
   
   
  29.         <div class="item"> 
    30. 
   
   
   
   
  30.         <img src="img3.jpg" alt=""> 
    31. 
   
   
   
   
  31.             <div class="carousel-caption"> 
    32. 
   
   
   
   
  32.               <h4>Third Thumbnail label</h4> 
    33. 
   
   
   
   
  33.               <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
    34. 
   
   
   
   
  34.             </div> 
    35. 
   
   
   
   
  35.         </div> 
    36. 
   
   
   
   
  36.       </div> 
    37. 
   
   
   
   
  37.         <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
    38. 
   
   
   
   
  38.         <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a> 
    39. 
   
   
   
   
  39.         </div> 
    40. 
   
   
   
   
  40.     <script>     
    41. 
   
   
   
   
  41.     $('.carousel').carousel() 
    42. 
   
   
   
   
  42.     </script> 
    43. 
   
   
   
   
  43.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    44. 
   
   
   
   
  44.     <script src="js/bootstrap.js"></script> 
    45. 
   
   
   
   
  45.     </body> 
    46.
struts+springのコメント
java synchronized同期静的方法と同期非静的方法の異同