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>

这只是一个普通的图库，有更改的图像，任何方式使这个淡入淡出的画廊和添加按钮来手动更改图像？或者我是否必须重写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>

用按钮淡化画廊

2 个答案: