From 8ae056130fb077f4964a5ef760f07a06e5a70188 Mon Sep 17 00:00:00 2001 From: siyi0211 Date: Thu, 29 Jul 2021 04:07:55 +0800 Subject: [PATCH] update the transition of image --- image-carousel/index.html | 7 +++++++ image-carousel/script.js | 32 +++++++++++++++++++++++++++----- image-carousel/style.css | 3 +-- 3 files changed, 35 insertions(+), 7 deletions(-) diff --git a/image-carousel/index.html b/image-carousel/index.html index a3386f9..d844c72 100644 --- a/image-carousel/index.html +++ b/image-carousel/index.html @@ -9,6 +9,10 @@
+ fourth-image first-image @@ -24,6 +28,9 @@ src="https://images.unsplash.com/photo-1599561046251-bfb9465b4c44?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1492&q=80" alt="fourth-image" /> + first-image
diff --git a/image-carousel/script.js b/image-carousel/script.js index 18c387b..8ec8775 100644 --- a/image-carousel/script.js +++ b/image-carousel/script.js @@ -4,7 +4,7 @@ const rightBtn = document.getElementById('right') const img = document.querySelectorAll('#imgs img') -let idx = 0 +let idx = 1 let interval = setInterval(run, 2000) @@ -15,12 +15,34 @@ function run() { function changeImage() { if(idx > img.length - 1) { - idx = 0 - } else if(idx < 0) { idx = img.length - 1 - } - imgs.style.transform = `translateX(${-idx * 500}px)` + imgs.style.transition = 'all, linear, 1s'; + imgs.style.transform = `translateX(${-idx * 500}px)` + + setTimeout(function() { + idx = 1; + imgs.style.transition = ''; + imgs.style.transform = `translateX(${-500}px)` + },0) + } + else if(idx < 0){ + idx = 0 + + imgs.style.transition = 'all, linear, 1s'; + imgs.style.transform = `translateX(${-idx * 500}px)` + + setTimeout(function() { + idx = img.length - 2; + imgs.style.transition = ''; + imgs.style.transform = `translateX(${-idx * 500}px)` + },0) + } + else{ + imgs.style.transition = 'all, linear, 1s'; + imgs.style.transform = `translateX(${-idx * 500}px)` + } + } function resetInterval() { diff --git a/image-carousel/style.css b/image-carousel/style.css index 338592c..bdcfd4f 100644 --- a/image-carousel/style.css +++ b/image-carousel/style.css @@ -28,8 +28,7 @@ img { .image-container { display: flex; - transform: translateX(0); - transition: transform 0.5s ease-in-out; + transform: translateX(-500px); } .buttons-container {