带有按钮的淡入淡出画廊

Question

我对编程还很陌生，我正在尝试 JavaScript。我发现了很多关于 fade Galleries 的帖子，但没有一个有自动 Gallery 和手动更改图像的按钮。

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>

这只是一个带有不断变化的图像的普通画廊，有什么方法可以使它成为一个淡入淡出的画廊并添加按钮以手动更改图像？还是我必须重写 Javascript?

Answer 1

这是一个实现设置 opacity 和 position 属性。但请记住，在使用此实现时，图像必须具有相同的大小。因此，我将所有图像的 opacity 设置为 0，并将所有图像的位置设置为 absolute 将它们一个接一个地重叠，并使用 css 的过渡属性为淡入淡出设置动画。将图像的不透明度更新为 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>

带有按钮的淡入淡出画廊

Fade Gallery with Buttons

html

javascript

image-gallery