ボタン付きフェードギャラリー

Question

私はプログラミングには新しく、JavaScriptを試していました。フェードギャラリーについては多くの記事を見つけましたが、自動ギャラリーではなく、手動でも画像を変更するボタンはありません。変化する画像と普通のギャラリー

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>

のthats、そのフェードギャラリーを作成し、手動で画像を変更するためのボタンを追加する方法？または私はJavascriptを書き直す必要がありますか？

Answer 1

実装設定はopacityとpositionです。しかし、この実装を使用している間は、イメージは同じサイズでなければならないことに注意してください。 したがって、すべての画像のopacityを0に設定し、すべての画像の位置をabsoluteに重ねて重ねて、cssのtransitionプロパティを使用してフェードをアニメーション化しました。それはフェードインさせる1に、画像の不透明度を更新する。

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

これはかなり簡単な作業です。前と次の矢印をアブソリュートの位置に追加し、ギャラリーを相対的な位置に設定するだけです。クリックハンドラを追加して、現在のインデックスを減分またはインクリメントします。

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>

作品