연습장:Sakura/1: 두 판 사이의 차이

@@ 1번째 줄: / 1번째 줄: @@
+<html>
+<div class="slideshow-container">
+  <div class="slideshow">
+    <img src="/w/images/4/44/사토_에이사쿠.jpg">
+    <img src="/w/images/3/3e/아베_신조.jpg">
+    <img src="/w/images/c/c7/고이즈미_준이치로.jpg">
+  </div>
+</div>
+<button class="prev" onclick="plusSlides(-1)">❮</button>
+<button class="next" onclick="plusSlides(1)">❯</button>
+<style>
+.slideshow-container {
+  position: relative;
+  overflow: hidden;
+}
+.slideshow {
+  display: flex;
+  transition: transform 0.5s ease-in-out;
+}
+.slideshow img {
+  width: 100%;
+  height: auto;
+}
+.prev, .next {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 16px;
+  background-color: black;
+  color: white;
+  font-size: 24px;
+  border: none;
+  cursor: pointer;
+  z-index: 1;
+}
+.prev {
+  left: 0;
+}
+.next {
+  right: 0;
+}
+</style>
+<script>
+let slideIndex = 1;
+showSlides(slideIndex);
+function plusSlides(n) {
+  showSlides(slideIndex += n);
+}
+function showSlides(n) {
+  const slides = document.querySelectorAll('.slideshow img');
+  const numSlides = slides.length;
+  if (n > numSlides) { slideIndex = 1; }
+  if (n < 1) { slideIndex = numSlides; }
+  const offset = (slideIndex - 1) * -100;
+  document.querySelector('.slideshow').style.transform = `translateX(${offset}%)`;
+}
+</script>
+</html>

2023년 2월 19일 (일) 17:56 판