javascript - 使照片库在照片之间移动

Question

我正在尝试制作照片库，我希望用户可以在打开图片后在图片之间移动（如滑块），所以请提供帮助？这是我画廊的现场演示

这是HTML

 <div class="gallery" id="gallery">

  <div class="gallery-item">
    <div class="content"><img src=""></div>
  </div>

  <div class="gallery-item">
    <div class="content"><img src=""></div>
  </div>

  <div class="gallery-item">
    <div class="content"><img src=""> </div>
  </div>
  
</div>

这是CSS

.hello {
  opacity: 1 !important;
}

.full {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2000;
}

.full .content {
  background-color: rgba(0, 0, 0, 0.75) !important;
  height: 100%;
  width: 100%;
  display: grid;
  z-index: 100001;
}
.full .content img {
  position: fixed;
  top: 0; left: 0;
  margin: 30px;
  align-self: center;
  object-fit: contain;
  z-index: 100001;
  width: calc(100% - 60px);
  height: calc(100% - 60px);
  background-color: transparent;
}

.byebye {
  opacity: 0;
}

.byebye:hover {
  transform: scale(0.2) !important;
}



.gallery {
  border-radius: 10px ;
  padding: 2%;
  margin: 3.2%;
  display: grid;
  grid-column-gap: 30px;
  grid-row-gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(450px, 10fr));
  grid-auto-rows: 10px;
  background: #A3BDE4;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4"%3E%3Cpath fill="%239C92AC" fill-opacity="0.4" d="M1 3h1v1H1V3zm2-2h1v1H3V1z"%3E%3C/path%3E%3C/svg%3E');
}


.gallery img {
  max-width: 100%;
  border-radius: 8px;

  transition: all 1.5s ease;
}


.gallery .content {
  padding: 4px;
}

.gallery .gallery-item {
  transition: grid-row-start 300ms linear;
  transition: transform 300ms ease;
  transition: all 0.5s ease;
  cursor: pointer;
}

.gallery .gallery-item:hover {
  transform: scale(1.025);
}



@media (max-width: 400px) {
  .gallery {
    grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
  }
}

这是js

var gallery = document.querySelector('#gallery');
var getVal = function (elem, style) { return parseInt(window.getComputedStyle(elem).getPropertyValue(style)); };
var getHeight = function (item) { return item.querySelector('.content').getBoundingClientRect().height; };
var resizeAll = function () {
    var altura = getVal(gallery, 'grid-auto-rows');
    var gap = getVal(gallery, 'grid-row-gap');
    gallery.querySelectorAll('.gallery-item').forEach(function (item) {
        var el = item;
        el.style.gridRowEnd = "span " + Math.ceil((getHeight(item) + gap) / (altura + gap));
    });
};
gallery.querySelectorAll('img').forEach(function (item) {
    item.classList.add('byebye');
    if (item.complete) {
        console.log(item.src);
    }
    else {
        item.addEventListener('load', function () {
            var altura = getVal(gallery, 'grid-auto-rows');
            var gap = getVal(gallery, 'grid-row-gap');
            var gitem = item.parentElement.parentElement;
            gitem.style.gridRowEnd = "span " + Math.ceil((getHeight(gitem) + gap) / (altura + gap));
            item.classList.remove('byebye');
        });
    }
});
window.addEventListener('resize', resizeAll);
gallery.querySelectorAll('.gallery-item').forEach(function (item) {
    item.addEventListener('click', function () {        
        item.classList.toggle('full');        
    });
});

这是整个画廊的现场演示 https://jsfiddle.net/karimabdlehamee/uf73rsc0/2/

标签： javascripthtmlcss