1. <div id="gallery">
  2. <div class="slideFrame">
  3. <ul>
  4. <li><a href="#"><img src="img/gallery_visual1.jpg" alt="gallery_visual1" width="520" height="280"></a></li>
  5. <li><a href="#"><img src="img/gallery_visual2.jpg" alt="gallery_visual2" width="520" height="280"></a></li>
  6. <li><a href="#"><img src="img/gallery_visual3.jpg" alt="gallery_visual3" width="520" height="280"></a></li>
  7. </ul>
  8. </div>
  9. <ul class="nav">
  10. <li><input type="radio" id="switch1" name="gallery" checked="checked"></li>
  11. <li><input type="radio" id="switch2" name="gallery"></li>
  12. <li><input type="radio" id="switch3" name="gallery"></li>
  13. </ul>
  14. <p class="prev"><a href="#"></a></p>
  15. <p class="next"><a href="#"></a></p>
  16. <!-- /#gallery --></div>
  1. /* :::::: gallery ::::::
  2. * #gallery内の指定
  3. */
  4. #gallery {
  5. position: relative;
  6. width: 700px;
  7. height: 300px;
  8. margin: 10px auto;
  9. padding: 10px 0;
  10. background: url(../img/bg_gallery.jpg);
  11. }
  12. #gallery .slideFrame {
  13. position: relative;
  14. height: 280px;
  15. overflow: hidden;
  16. margin-bottom: 10px;
  17. }
  18. /* slide images */
  19. #gallery .slideFrame ul {
  20. position: absolute;
  21. top: 0;
  22. left: 90px;
  23. width: 1620px;
  24. margin: 0;
  25. }
  26. #gallery .slideFrame ul li {
  27. float: left;
  28. width: 520px;
  29. margin-right: 20px;
  30. }
  31. #gallery .slideFrame ul li:last-child {
  32. margin-right: 0;
  33. }
  34. #gallery .slideFrame ul li a {
  35. background: none;
  36. }
  37. /* gallery items */
  38. #gallery ul li,
  39. #gallery ul li input,
  40. #gallery p,
  41. #gallery p a {
  42. background: url(../img/gallery_item.png);
  43. }
  44. /* gallery list button */
  45. #gallery ul.nav {
  46. width: 62px;
  47. margin: 0 auto;
  48. padding: 0;
  49. }
  50. #gallery ul.nav li {
  51. float: left;
  52. margin-right: 16px;
  53. background-position: -260px 0;
  54. }
  55. #gallery ul.nav li:last-child {
  56. margin-right: 0;
  57. }
  58. #gallery ul.nav li input {
  59. display: block;
  60. width: 10px;
  61. height: 10px;
  62. border: 0;
  63. background-position: -260px -20px;
  64. cursor: pointer;
  65. }
  66. #gallery ul.nav li input:hover,
  67. #gallery ul.nav li input:checked { opacity: 0; }
  68. /* slider arrow button */
  69. #gallery p {
  70. position: absolute;
  71. top: 0;
  72. margin: 0;
  73. width: 110px;
  74. height: 320px;
  75. cursor: pointer;
  76. }
  77. #gallery p.prev {
  78. left: 0;
  79. }
  80. #gallery p.next {
  81. right: 0;
  82. background-position: -110px 0;
  83. }
  84. #gallery p a {
  85. display: block;
  86. width: 26px;
  87. height: 26px;
  88. margin: 140px 0 0 40px;
  89. background-position: -230px 0;
  90. }
  91. #gallery p:hover a {
  92. margin: 140px 0 0 32px;
  93. }
  94. #gallery p.next a {
  95. margin-left: 44px;
  96. background-position: -230px -30px;
  97. }
  98. #gallery p.next:hover a {
  99. margin-left: 52px;
  100. }
  101. /* CSS Programming */
  102. #gallery input:first-of-type:checked ~ .slideFrame ul {
  103. left: 90px;
  104. }
  105. #gallery input:nth-of-type(2):checked ~ .slideFrame ul {
  106. left: -450px;
  107. }
  108. #gallery input:nth-of-type(3):checked ~ .slideFrame ul {
  109. left: -990px;
  110. }
  111. /* transition */
  112. #gallery ul.nav li input {
  113. transition: opacity 0.5s ease 0s;
  114. -webkit-transition: opacity 0.5s ease 0;
  115. }
  116. #gallery p a {
  117. transition: margin 0.3s ease 0s;
  118. -webkit-transition: margin 0.3s ease 0;
  119. }
  120. /* clearfix */
  121. #gallery ul:before, #gallery ul:after {
  122. content: ""; display: table;
  123. }
  124. #gallery ul:after {
  125. clear: both;
  126. }
  127. #gallery ul {
  128. *zoom: 1;
  129. }