caojiezi2003/50projects50days
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #68 from siyi0211/master

Browse Source 
Update the transition of image
This commit is contained in:
Brad Traversy 2021-07-31 10:33:02 -04:00 committed by GitHub
commit 5a09308354
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 35 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
image-carousel/index.html
View File

@ -9,6 +9,10 @@
<body> <body>
<div class="carousel"> <div class="carousel">
<div class="image-container" id="imgs"> <div class="image-container" id="imgs">
<img
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"
/>
<img src="https://images.unsplash.com/photo-1599394022918-6c2776530abb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1458&q=80" <img src="https://images.unsplash.com/photo-1599394022918-6c2776530abb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1458&q=80"
alt="first-image" alt="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" 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" alt="fourth-image"
/> />
<img src="https://images.unsplash.com/photo-1599394022918-6c2776530abb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1458&q=80"
alt="first-image"
/>
</div> </div>
<div class="buttons-container"> <div class="buttons-container">

32
image-carousel/script.js
View File

@ -4,7 +4,7 @@ const rightBtn = document.getElementById('right')
const img = document.querySelectorAll('#imgs img') const img = document.querySelectorAll('#imgs img')
let idx = 0 let idx = 1
let interval = setInterval(run, 2000) let interval = setInterval(run, 2000)
@ -15,12 +15,34 @@ function run() {
function changeImage() { function changeImage() {
if(idx > img.length - 1) { if(idx > img.length - 1) {
idx = 0
} else if(idx < 0) {
idx = img.length - 1 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() { function resetInterval() {

3
image-carousel/style.css
View File

@ -28,8 +28,7 @@ img {
.image-container { .image-container {
display: flex; display: flex;
transform: translateX(0); transform: translateX(-500px);
transition: transform 0.5s ease-in-out;
} }
.buttons-container { .buttons-container {