Fondu galerie avec des boutons

Question

Je suis assez nouveau à la programmation et j'essayais JavaScript. J'ai trouvé de nombreux articles sur les galeries de fondus mais pas de galerie automatique mais aussi des boutons pour changer l'image manuellement.

var myIndex = 0; 
 
slider(); 
 

 
function slider() { 
 
    var i; 
 
    var x = document.getElementsByClassName("Galleryimg"); 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.display = "none"; 
 
    } 
 
    myIndex++; 
 
    if (myIndex > x.length) { 
 
    myIndex = 1 
 
    } 
 
    x[myIndex - 1].style.display = "block"; 
 
    setTimeout(slider, 9000); 
 
}

/* CSS is not relevant I think, but I post it anyway. */ 
 
.Galleryimg { 
 
    display: none; 
 
    width: 100%; 
 
    height: 600px; 
 
}

<div id="Gallery"> 
 
    <img class="Galleryimg" src="images/Header.png"> 
 
    <img class="Galleryimg" src="images/Header2.jpg"> 
 
    <img class="Galleryimg" src="images/Header3.jpg"> 
 
</div>

c'est juste une galerie normale avec des images changeantes, une façon de faire qu'une galerie de fondu et ajouter des boutons pour changer l'image manuellement? ou dois-je réécrire le Javascript?

Answer 1

Voici un paramètre d'implémentation opacity et une propriété position. Mais souvenez-vous qu'en utilisant cette implémentation, les images doivent être de la même taille. J'ai donc réglé le opacity de toutes les images sur 0 et la position de toutes les images sur absolute en les superposant l'une à l'autre et en animant le fondu en utilisant la propriété de transition de css. Mise à jour de l'opacité de l'image à 1 laisser fondu.

var myIndex = 0; 
 

 
function slider() { 
 
    var i; 
 
    var x = document.getElementsByClassName("Galleryimg"); 
 
    for (i = 0; i < x.length; i++) { 
 
    x[i].style.opacity = 0; 
 
    } 
 
    myIndex++; 
 
    if (myIndex > x.length) { 
 
    myIndex = 1 
 
    } 
 
    x[myIndex - 1].style.opacity = 1; 
 
    
 
} 
 
document.getElementById("change").addEventListener("click",function(){ 
 
slider(); 
 
}); 
 
setInterval(slider, 4000);

/* CSS is not relevant I think, but I post it anyway. */ 
 
.Galleryimg { 
 
    width: 100%; 
 
    height: 600px; 
 
    opacity: 0; 
 
    position: absolute; 
 
    transition: opacity 4s ease-in-out; 
 
} 
 
#img1{ 
 
background: red; 
 
} 
 
#img2{ 
 
background: blue; 
 
} 
 
#img3{ 
 
background: green; 
 
opacity: 1; 
 
} 
 
#Gallery{ 
 
position: relative; 
 
width: 100%; 
 
height: 600px; 
 
}

<div id="Gallery"> 
 
    <img class="Galleryimg" src="images/Header.png" id="img1"> 
 
    <img class="Galleryimg" src="images/Header2.jpg" id="img2"> 
 
    <img class="Galleryimg" src="images/Header3.jpg" id="img3"> 
 
</div> 
 
<input type="button" id="change" value="change"/>

Answer 2

Ceci est une tâche assez facile. Ajoutez simplement vos flèches précédentes et suivantes à la position absolue et réglez la galerie sur le positionnement relatif. Ajoutez un gestionnaire de clic pour décrémenter ou incrémenter l'index actuel.

var gallery = document.getElementsByClassName('gallery')[0]; 
 
var images = gallery.getElementsByClassName("gallery-img"); 
 
var currentIndex = -1; 
 
var timeoutMs = 3000; 
 

 
gallery.getElementsByClassName('gallery-btn-prev')[0].addEventListener('click', prevSlide); 
 
gallery.getElementsByClassName('gallery-btn-next')[0].addEventListener('click', nextSlide); 
 

 
initializeAndRunSlider(gallery); 
 

 
function initializeAndRunSlider(gallery) { 
 
    nextSlide(); 
 
    setTimeout(initializeAndRunSlider.bind(null, gallery), timeoutMs); 
 
} 
 
function prevSlide(e) { 
 
    currentIndex = mod(currentIndex - 1, images.length); 
 
    displayCurrentImage(); 
 
} 
 
function nextSlide(e) { 
 
    currentIndex = mod(currentIndex + 1, images.length); 
 
    displayCurrentImage(); 
 
} 
 
function displayCurrentImage() { 
 
    hideAllImages(images); 
 
    showImage(images, currentIndex); 
 
} 
 
function hideAllImages(images) { 
 
    for (var i = 0; i < images.length; i++) { 
 
    removeClass(images[i], 'visible'); 
 
    addClass(images[i], 'hidden'); 
 
    } 
 
} 
 
function showImage(images, index) { 
 
    removeClass(images[index], 'hidden'); 
 
    addClass(images[index], 'visible'); 
 
} 
 
function mod(m, n) { 
 
    return (m + n) % n; 
 
} 
 
function addClass(el, className) { 
 
    if (el.classList) el.classList.add(className); 
 
    else el.className += ' ' + className; 
 
} 
 
function removeClass(el, className) { 
 
    if (el.classList) el.classList.remove(className); 
 
    else el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); 
 
} 
 
function hasClass(el, className) { 
 
    if (el.classList) el.classList.contains(className); 
 
    else new RegExp('(^|)' + className + '(|$)', 'gi').test(el.className); 
 
}

.gallery { 
 
    position: relative; 
 
} 
 
.gallery-images { 
 
    position: relative; 
 
} 
 
.gallery-img { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
    -webkit-user-select: none; /* Chrome/Safari */   
 
    -moz-user-select: none; /* Firefox */ 
 
    -ms-user-select: none; /* IE10+ */ 
 
    -o-user-select: none; 
 
    user-select: none; 
 
} 
 
.gallery-controls { 
 
    position: absolute; 
 
    top: 50vh; 
 
    width: 100%; 
 
    z-index: 100; 
 
} 
 
.gallery-btn { 
 
    font-size: 3em; 
 
    opacity: 0.25; 
 
    cursor: pointer; 
 
} 
 
.gallery-btn:hover { 
 
    opacity: 0.75; 
 
} 
 
.gallery-btn-prev  { float: left; } 
 
.gallery-btn-prev:before { content: "◄"; } 
 
.gallery-btn-next  { float: right; } 
 
.gallery-btn-next:before { content: "►"; } 
 

 
/* https://fvsch.com/code/transition-fade/test5.html */ 
 
.visible { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    transition: opacity 2s linear; 
 
} 
 
.hidden { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    transition: visibility 0s 1s, opacity 1s linear; 
 
}

<div class="gallery"> 
 
    <div class="gallery-images"> 
 
    <img class="gallery-img visible" src="http://placehold.it/128x48/7ff/700?text=First"> 
 
    <img class="gallery-img" src="http://placehold.it/128x48/ff7/007?text=Second"> 
 
    <img class="gallery-img" src="http://placehold.it/128x48/f7f/070?text=Third"> 
 
    </div> 
 
    <div class="gallery-controls"> 
 
    <div class="gallery-btn gallery-btn-prev"></div> 
 
    <div class="gallery-btn gallery-btn-next"></div> 
 
    </div> 
 
</div>