javascript - 如何自动为已经结构化的图像库制作动画？-6ren

javascript - 如何自动为已经结构化的图像库制作动画？

转载作者：行者123 更新时间：2023-12-01 00:55:27

我已经有一个响应式设计，仅在 HTML5/CSS3 中构建，给出了我在 YouTube 上观察到的教程，但在视频中它只是打包的，我错过了我致力于搜索的重要内容，但我没有找到第二部分或另一个解释或引用的视频同时，查看 channel 上的每个教程，但没有成功。 :/

这是完整的代码，适用于任何移动设备和计算机。

img {
  max-width: 100%;
}

#app {
  width: 90%;
  height: 85%;
  overflow: hidden;
}

.ui-big-images {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
}

.ui-big-image {
  width: 100%;
  margin-right: -100%;
}

.ui-big-image img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center 20%;
  object-position: center 20%;
  width: 100%;
  height: 100%;
  display: block;
}

.ui-thumbnails {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  background-color: #fff;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  align-items: center;
  padding: 0 1rem;
  padding-top: .5rem;
  padding-right: 45%;
  padding-right: calc( 45% + .5rem);
}

.ui-thumbnail {
  display: block;
  margin-right: .5rem;
  padding: .5rem 0;
  cursor: pointer;
}

.ui-cuticle {
  background-color: #D4A12D;
  position: absolute;
  bottom: 0;
  height: .25rem;
  width: 100%;
}

.ui-thumbnail>img {
  width: auto;
}

.ui-content {
  position: absolute;
  width: 40%;
  right: 5%;
  bottom: 0;
}

.ui-articles {
  background: #493e56;
  color: white;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: stretch;
  align-items: stretch;
  overflow: hidden;
}

.ui-article {
  padding: 1.5rem;
  width: 100%;
  margin-right: -100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
}

.ui-paragraph {
  margin: 0;
  font-size: .7rem;
  line-height: 1.7;
}

.ui-nav {
  position: absolute;
  right: 0;
  bottom: 100%;
  background: inherit;
}

.ui-nav button {
  background: #493e56;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: .5em;
  width: 2em;
  color: #FFF;
  font-family: monospace;
  -webkit-transition: inherit;
  transition: inherit;
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
}

.ui-nav button:hover,
.ui-nav button:focus {
  background: #D4A12D;
  outline: none;
}

.ui-nav button:active {
  outline: none;
  -webkit-transform: translateY(0.25em);
  transform: translateY(0.25em);
  -webkit-transition-duration: 100ms;
  transition-duration: 100ms;
}

.ui-heading {
  margin: 0;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: normal;
}

.ui-heading:before {
  content: 'Animator';
  font-size: .5rem;
  text-transform: uppercase;
  display: block;
  margin-bottom: .5rem;
  letter-spacing: 1px;
}


/* ---------------------------------- */

.ui-big-image {
  opacity: 0;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.ui-big-image img {
  -webkit-transform: scale(0.85);
  transform: scale(0.85);
}

.ui-big-image[data-active]~.ui-big-image {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.ui-big-image[data-active] {
  opacity: 1;
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

.ui-big-image[data-active] img {
  -webkit-transform: scale(1);
  transform: scale(1);
}


/* ---------------------------------- */

.ui-article {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.ui-article:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #D4A12D;
  opacity: 1;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  z-index: 1;
}

.ui-article[data-active]~.ui-article {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.ui-article[data-active] {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

.ui-article[data-active]:before {
  opacity: 0;
}


/* ---------------------------------- */

.ui-thumbnail>img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
}

.ui-thumbnail:active>img {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-transition-duration: 100ms;
  transition-duration: 100ms;
}

.ui-thumbnail:focus {
  outline: none;
}

.ui-cuticle {
  display: none;
}

.ui-thumbnail[data-active]>img,
.ui-thumbnail:hover>img {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

.ui-thumbnail[data-active] .ui-cuticle {
  display: block;
}


/* ---------------------------------- */

body {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  background-color: #1A130C;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  position: relative;
  -webkit-transition-property: opacity, -webkit-transform, -webkit-filter;
  transition-property: opacity, -webkit-transform, -webkit-filter;
  transition-property: transform, opacity, filter;
  transition-property: transform, opacity, filter, -webkit-transform, -webkit-filter;
  -webkit-transition-duration: 0.7s, 0.7s, 0.7s;
  transition-duration: 0.7s, 0.7s, 0.7s;
  -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
  transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
}

body,
html {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

<div id="app" data-state="0">
  <div class="ui-big-images">
    <div class="ui-big-image" data-key="0">
      <img src="https://picsum.photos/1200/1200/?image=1005" alt="" />
    </div>
    <div class="ui-big-image" data-key="1">
      <img src="https://picsum.photos/1200/1200/?image=804" alt="" />
    </div>
    <div class="ui-big-image" data-key="2">
      <img src="https://picsum.photos/1200/1200/?image=838" alt="" />
    </div>
    <div class="ui-big-image" data-key="3">
      <img src="https://picsum.photos/1200/1200/?image=832" alt="" />
    </div>
    <div class="ui-big-image" data-key="4">
      <img src="https://picsum.photos/1200/1200/?image=836" alt="" />
    </div>
    <div class="ui-big-image" data-key="5">
      <img src="https://picsum.photos/1200/1200/?image=823" alt="" />
    </div>
  </div>
  <div class="ui-thumbnails">
    <div class="ui-thumbnail" tabindex="-1" data-key="0">
      <img src="https://picsum.photos/1200/1200/?image=1005" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="1">
      <img src="https://picsum.photos/1200/1200/?image=804" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="2">
      <img src="https://picsum.photos/1200/1200/?image=838" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="3">
      <img src="https://picsum.photos/1200/1200/?image=832" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="4">
      <img src="https://picsum.photos/1200/1200/?image=836" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="5">
      <img src="https://picsum.photos/1200/1200/?image=823" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
  </div>
  <div class="ui-content">

    <nav class="ui-nav">
      <button id="prev" tabindex="-1" title="Previous">&lt;</button>
      <button id="next" tabindex="-1" title="Next">&gt;</button>
    </nav>

    <div class="ui-articles">
      <article class="ui-article" data-key="0">
        <h2 class="ui-heading">Stephen Shaw</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae cupiditate assumenda nemo delectus totam atque quas suscipit dicta.</p>
      </article>
      <article class="ui-article" data-key="1">
        <h2 class="ui-heading">David Khourshid</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod sapiente soluta iusto molestias ullam. </p>
      </article>
      <article class="ui-article" data-key="2">
        <h2 class="ui-heading">Coding Compadre</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit, amet consectetur adipisicing elit. </p>
      </article>
      <article class="ui-article" data-key="3">
        <h2 class="ui-heading">Boolean Buddy</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p>
      </article>
      <article class="ui-article" data-key="4">
        <h2 class="ui-heading">Animation Amigo</h2>
        <p class="ui-paragraph">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias exercitationem voluptatibus</p>
      </article>
      <article class="ui-article" data-key="5">
        <h2 class="ui-heading">Keyframe Companion</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae soluta reprehenderit, ut doloribus corrupti</p>
      </article>
    </div>
  </div>
</div>

如何使用 jQuery 以简单的方式为图库制作动画，如下图所示:

你能向我解释一下如何为这个已经结构化的画廊制作动画吗？

最佳答案

有很多方法可以使用纯 JavaScript 或 jQuery 来实现该结果。

查看 HTML 标记，data-key 属性是指示当前要在图库中显示的图像的属性，指示类 ui-big- 的元素之间的关系图像、ui-thumbnail 或ui-article。

对于具有 ui-big-image 类的元素，它们具有 CSS 声明，可通过以下规则隐藏它们:

.ui-big-image {
  opacity: 0;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

这些元素通过 CSS 语句可见:

.ui-big-image[data-active] {
  opacity: 1;
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

对于具有 ui-article 类的元素，它们具有 CSS 声明，可通过以下规则隐藏它们:

.ui-article {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

然后，通过 .ui-article[data-active] CSS 规则，我反转样式以根据需要使它们可见或不可见。

.ui-article[data-active] {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
}

CSS 声明 ui-article:before 添加一个空部分来隐藏图像描述。通过 .ui-article[data-active]:before CSS 规则，我们可以使其可视化。

然后，您必须为缩略图以及上一个和下一个按钮分配事件，以交换上述类的元素中的 data-active 属性，使它们可见或不可见。对于缩略图我有这个功能:

function setThumbnailAction() {
  var uiThumbnailElements = document.getElementsByClassName("ui-thumbnail");
  var i, len = uiThumbnailElements.length, thumbnail;

  itemsInGallery = len - 1;

  for (i = 0; i < len; i++) {
    thumbnail = uiThumbnailElements[i];
    thumbnail.onclick = function() {
      key = this.dataset.key;
      showImage();
    }
  }
}

在前面的代码中，我们获取了 ui-thumbnail 类元素的 key，并将其保存在全局 key 变量中。然后我们调用 showImage() 函数。

showImage() 函数负责将具有默认 true 值的 data-active 属性设置为具有 CSS 类的元素ui-big-image、ui-article 和 ui-thumbnail，通过此选择器使用 key 值div.ui-big-image[data-key=\""+ key + "\"]。一开始，我们总是使用 restoreGallery() 函数删除 data-active 属性。

function showImage() {
    restoreGallery("ui-big-image");
    restoreGallery("ui-article");
    restoreGallery("ui-thumbnail");
    var image = document.querySelector("div.ui-big-image[data-key=\"" + key + "\"]");
    image.dataset.active = "true";

    var article = document.querySelector("article.ui-article[data-key=\"" + key + "\"]");
    article.dataset.active = "true";

    var uiThumbnail = document.querySelector("div.ui-thumbnail[data-key=\"" + key + "\"]");
    uiThumbnail.dataset.active = "true";
}

您可以在这些示例中看到实际效果:

使用纯 JavaScript:

(function() {

  var itemsInGallery = 0, key = 0;

  function setThumbnailAction() {
    var uiThumbnailElements = document.getElementsByClassName("ui-thumbnail"), i, len = uiThumbnailElements.length, thumbnail;
    itemsInGallery = len - 1;

    for (i = 0; i < len; i++) {
      thumbnail = uiThumbnailElements[i];
      thumbnail.onclick = function() {
        key = this.dataset.key;
        showImage();
      }
    }
  }

  function showImage() {
    restoreGallery("ui-big-image");
    restoreGallery("ui-article");
    restoreGallery("ui-thumbnail");
    var image = document.querySelector("div.ui-big-image[data-key=\"" + key + "\"]");
    image.dataset.active = "true";

    var article = document.querySelector("article.ui-article[data-key=\"" + key + "\"]");
    article.dataset.active = "true";

    var uiThumbnail = document.querySelector("div.ui-thumbnail[data-key=\"" + key + "\"]");
    uiThumbnail.dataset.active = "true";
  }

  function restoreGallery(className) {
    var items = document.getElementsByClassName(className), i, len = items.length, item;

    for (i = 0; i < len; i++) {
      item = items[i];
      item.removeAttribute("data-active");
    }
  }

  function setPrevNextAction() {
    var prev = document.getElementById("prev"), next = document.getElementById("next");

    prev.onclick = function() {
      key--;
      key = key < 0 ? 0 : key;
      showImage();
    };
    next.onclick = function() {
      key++;
      key = key > itemsInGallery ? itemsInGallery : key;
      showImage();
    };
  }

  setThumbnailAction();
  setPrevNextAction();
  showImage();

  var timeInSeconds = 5;
  setInterval(function() {
    key++;
    key = key > itemsInGallery ? 0 : key;
    showImage();
  }, timeInSeconds * 1000);
}());

img {
  max-width: 100%;
}

#app {
  width: 90%;
  height: 85%;
  overflow: hidden;
}

.ui-big-images {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
}

.ui-big-image {
  width: 100%;
  margin-right: -100%;
}

.ui-big-image img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center 20%;
  object-position: center 20%;
  width: 100%;
  height: 100%;
  display: block;
}

.ui-thumbnails {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  background-color: #fff;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  align-items: center;
  padding: 0 1rem;
  padding-top: .5rem;
  padding-right: 45%;
  padding-right: calc( 45% + .5rem);
}

.ui-thumbnail {
  display: block;
  margin-right: .5rem;
  padding: .5rem 0;
  cursor: pointer;
}

.ui-cuticle {
  background-color: #D4A12D;
  position: absolute;
  bottom: 0;
  height: .25rem;
  width: 100%;
}

.ui-thumbnail>img {
  width: auto;
}

.ui-content {
  position: absolute;
  width: 40%;
  right: 5%;
  bottom: 0;
}

.ui-articles {
  background: #493e56;
  color: white;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: stretch;
  align-items: stretch;
  overflow: hidden;
}

.ui-article {
  padding: 1.5rem;
  width: 100%;
  margin-right: -100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
}

.ui-paragraph {
  margin: 0;
  font-size: .7rem;
  line-height: 1.7;
}

.ui-nav {
  position: absolute;
  right: 0;
  bottom: 100%;
  background: inherit;
}

.ui-nav button {
  background: #493e56;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: .5em;
  width: 2em;
  color: #FFF;
  font-family: monospace;
  -webkit-transition: inherit;
  transition: inherit;
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
}

.ui-nav button:hover,
.ui-nav button:focus {
  background: #D4A12D;
  outline: none;
}

.ui-nav button:active {
  outline: none;
  -webkit-transform: translateY(0.25em);
  transform: translateY(0.25em);
  -webkit-transition-duration: 100ms;
  transition-duration: 100ms;
}

.ui-heading {
  margin: 0;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: normal;
}

.ui-heading:before {
  content: 'Animator';
  font-size: .5rem;
  text-transform: uppercase;
  display: block;
  margin-bottom: .5rem;
  letter-spacing: 1px;
}


/* --- */

.ui-big-image {
  opacity: 0;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.ui-big-image img {
  -webkit-transform: scale(0.85);
  transform: scale(0.85);
}

.ui-big-image[data-active]~.ui-big-image {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.ui-big-image[data-active] {
  opacity: 1;
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

.ui-big-image[data-active] img {
  -webkit-transform: scale(1);
  transform: scale(1);
}


/* --- */

.ui-article {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.ui-article:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #D4A12D;
  opacity: 1;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  z-index: 1;
}

.ui-article[data-active]~.ui-article {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.ui-article[data-active] {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

.ui-article[data-active]:before {
  opacity: 0;
}


/* --- */

.ui-thumbnail>img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
}

.ui-thumbnail:active>img {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-transition-duration: 100ms;
  transition-duration: 100ms;
}

.ui-thumbnail:focus {
  outline: none;
}

.ui-cuticle {
  display: none;
}

.ui-thumbnail[data-active]>img,
.ui-thumbnail:hover>img {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

.ui-thumbnail[data-active] .ui-cuticle {
  display: block;
}


/* --- */

body {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  background-color: #1A130C;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  position: relative;
  -webkit-transition-property: opacity, -webkit-transform, -webkit-filter;
  transition-property: opacity, -webkit-transform, -webkit-filter;
  transition-property: transform, opacity, filter;
  transition-property: transform, opacity, filter, -webkit-transform, -webkit-filter;
  -webkit-transition-duration: 0.7s, 0.7s, 0.7s;
  transition-duration: 0.7s, 0.7s, 0.7s;
  -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
  transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
}

body,
html {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

<div id="app" data-state="0">
  <div class="ui-big-images">
    <div class="ui-big-image" data-key="0">
      <img src="https://picsum.photos/1200/1200/?image=1005" alt="" />
    </div>
    <div class="ui-big-image" data-key="1">
      <img src="https://picsum.photos/1200/1200/?image=804" alt="" />
    </div>
    <div class="ui-big-image" data-key="2">
      <img src="https://picsum.photos/1200/1200/?image=838" alt="" />
    </div>
    <div class="ui-big-image" data-key="3">
      <img src="https://picsum.photos/1200/1200/?image=832" alt="" />
    </div>
    <div class="ui-big-image" data-key="4">
      <img src="https://picsum.photos/1200/1200/?image=836" alt="" />
    </div>
    <div class="ui-big-image" data-key="5">
      <img src="https://picsum.photos/1200/1200/?image=823" alt="" />
    </div>
  </div>
  <div class="ui-thumbnails">
    <div class="ui-thumbnail" tabindex="-1" data-key="0">
      <img src="https://picsum.photos/1200/1200/?image=1005" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="1">
      <img src="https://picsum.photos/1200/1200/?image=804" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="2">
      <img src="https://picsum.photos/1200/1200/?image=838" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="3">
      <img src="https://picsum.photos/1200/1200/?image=832" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="4">
      <img src="https://picsum.photos/1200/1200/?image=836" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="5">
      <img src="https://picsum.photos/1200/1200/?image=823" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
  </div>
  <div class="ui-content">

    <nav class="ui-nav">
      <button id="prev" tabindex="-1" title="Previous">&lt;</button>
      <button id="next" tabindex="-1" title="Next">&gt;</button>
    </nav>

    <div class="ui-articles">
      <article class="ui-article" data-key="0">
        <h2 class="ui-heading">Stephen Shaw</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae cupiditate assumenda nemo delectus totam atque quas suscipit dicta.</p>
      </article>
      <article class="ui-article" data-key="1">
        <h2 class="ui-heading">David Khourshid</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod sapiente soluta iusto molestias ullam. </p>
      </article>
      <article class="ui-article" data-key="2">
        <h2 class="ui-heading">Coding Compadre</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit, amet consectetur adipisicing elit. </p>
      </article>
      <article class="ui-article" data-key="3">
        <h2 class="ui-heading">Boolean Buddy</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p>
      </article>
      <article class="ui-article" data-key="4">
        <h2 class="ui-heading">Animation Amigo</h2>
        <p class="ui-paragraph">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias exercitationem voluptatibus</p>
      </article>
      <article class="ui-article" data-key="5">
        <h2 class="ui-heading">Keyframe Companion</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae soluta reprehenderit, ut doloribus corrupti</p>
      </article>
    </div>
  </div>
</div>

使用 jQuery:

$(function() {

  var itemsInGallery = 0, key = 0;

  function setThumbnailAction() {

    var uiThumbnailElements = $(".ui-thumbnail");
    itemsInGallery = uiThumbnailElements.length - 1;

    uiThumbnailElements.on("click", function() {
      key = $(this).data("key");
      showImage();
    });
  }

  function showImage() {
    restoreGallery("ui-big-image");
    restoreGallery("ui-article");
    restoreGallery("ui-thumbnail");

    var image = $("div.ui-big-image[data-key=\"" + key + "\"]");
    image.attr("data-active", "true");

    var article = $("article.ui-article[data-key=\"" + key + "\"]");
    article.attr("data-active", "true");

    var uiThumbnail = $("div.ui-thumbnail[data-key=\"" + key + "\"]");
    uiThumbnail.attr("data-active", "true");
  }

  function restoreGallery(className) {
    $("." + className).removeAttr("data-active");
  }

  function setPrevNextAction() {
    var prev = $("#prev"), next = $("#next");

    prev.on("click", function() {
      key--;
      key = key < 0 ? 0 : key;
      showImage();
    });
    next.on("click", function() {
      key++;
      key = key > itemsInGallery ? itemsInGallery : key;
      showImage();
    });
  }

  setThumbnailAction();
  setPrevNextAction();
  showImage();

  var timeInSeconds = 5;
  setInterval(function() {
    key++;
    key = key > itemsInGallery ? 0 : key;
    showImage();
  }, timeInSeconds * 1000);
}());

img {
  max-width: 100%;
}

#app {
  width: 90%;
  height: 85%;
  overflow: hidden;
}

.ui-big-images {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
}

.ui-big-image {
  width: 100%;
  margin-right: -100%;
}

.ui-big-image img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center 20%;
  object-position: center 20%;
  width: 100%;
  height: 100%;
  display: block;
}

.ui-thumbnails {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  background-color: #fff;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  flex-direction: row;
  -webkit-box-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  align-items: center;
  padding: 0 1rem;
  padding-top: .5rem;
  padding-right: 45%;
  padding-right: calc( 45% + .5rem);
}

.ui-thumbnail {
  display: block;
  margin-right: .5rem;
  padding: .5rem 0;
  cursor: pointer;
}

.ui-cuticle {
  background-color: #D4A12D;
  position: absolute;
  bottom: 0;
  height: .25rem;
  width: 100%;
}

.ui-thumbnail>img {
  width: auto;
}

.ui-content {
  position: absolute;
  width: 40%;
  right: 5%;
  bottom: 0;
}

.ui-articles {
  background: #493e56;
  color: white;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: stretch;
  align-items: stretch;
  overflow: hidden;
}

.ui-article {
  padding: 1.5rem;
  width: 100%;
  margin-right: -100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -webkit-box-pack: center;
  justify-content: center;
}

.ui-paragraph {
  margin: 0;
  font-size: .7rem;
  line-height: 1.7;
}

.ui-nav {
  position: absolute;
  right: 0;
  bottom: 100%;
  background: inherit;
}

.ui-nav button {
  background: #493e56;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: .5em;
  width: 2em;
  color: #FFF;
  font-family: monospace;
  -webkit-transition: inherit;
  transition: inherit;
  -webkit-transition-duration: 300ms;
  transition-duration: 300ms;
}

.ui-nav button:hover,
.ui-nav button:focus {
  background: #D4A12D;
  outline: none;
}

.ui-nav button:active {
  outline: none;
  -webkit-transform: translateY(0.25em);
  transform: translateY(0.25em);
  -webkit-transition-duration: 100ms;
  transition-duration: 100ms;
}

.ui-heading {
  margin: 0;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: normal;
}

.ui-heading:before {
  content: 'Animator';
  font-size: .5rem;
  text-transform: uppercase;
  display: block;
  margin-bottom: .5rem;
  letter-spacing: 1px;
}


/* --- */

.ui-big-image {
  opacity: 0;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.ui-big-image img {
  -webkit-transform: scale(0.85);
  transform: scale(0.85);
}

.ui-big-image[data-active]~.ui-big-image {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.ui-big-image[data-active] {
  opacity: 1;
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

.ui-big-image[data-active] img {
  -webkit-transform: scale(1);
  transform: scale(1);
}


/* --- */

.ui-article {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}

.ui-article:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #D4A12D;
  opacity: 1;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  z-index: 1;
}

.ui-article[data-active]~.ui-article {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.ui-article[data-active] {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
}

.ui-article[data-active]:before {
  opacity: 0;
}


/* --- */

.ui-thumbnail>img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
}

.ui-thumbnail:active>img {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
  -webkit-transition-duration: 100ms;
  transition-duration: 100ms;
}

.ui-thumbnail:focus {
  outline: none;
}

.ui-cuticle {
  display: none;
}

.ui-thumbnail[data-active]>img,
.ui-thumbnail:hover>img {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

.ui-thumbnail[data-active] .ui-cuticle {
  display: block;
}


/* --- */

body {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
  background-color: #1A130C;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  position: relative;
  -webkit-transition-property: opacity, -webkit-transform, -webkit-filter;
  transition-property: opacity, -webkit-transform, -webkit-filter;
  transition-property: transform, opacity, filter;
  transition-property: transform, opacity, filter, -webkit-transform, -webkit-filter;
  -webkit-transition-duration: 0.7s, 0.7s, 0.7s;
  transition-duration: 0.7s, 0.7s, 0.7s;
  -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
  transition-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
}

body,
html {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="app" data-state="0">
  <div class="ui-big-images">
    <div class="ui-big-image" data-key="0">
      <img src="https://picsum.photos/1200/1200/?image=1005" alt="" />
    </div>
    <div class="ui-big-image" data-key="1">
      <img src="https://picsum.photos/1200/1200/?image=804" alt="" />
    </div>
    <div class="ui-big-image" data-key="2">
      <img src="https://picsum.photos/1200/1200/?image=838" alt="" />
    </div>
    <div class="ui-big-image" data-key="3">
      <img src="https://picsum.photos/1200/1200/?image=832" alt="" />
    </div>
    <div class="ui-big-image" data-key="4">
      <img src="https://picsum.photos/1200/1200/?image=836" alt="" />
    </div>
    <div class="ui-big-image" data-key="5">
      <img src="https://picsum.photos/1200/1200/?image=823" alt="" />
    </div>
  </div>
  <div class="ui-thumbnails">
    <div class="ui-thumbnail" tabindex="-1" data-key="0">
      <img src="https://picsum.photos/1200/1200/?image=1005" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="1">
      <img src="https://picsum.photos/1200/1200/?image=804" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="2">
      <img src="https://picsum.photos/1200/1200/?image=838" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="3">
      <img src="https://picsum.photos/1200/1200/?image=832" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="4">
      <img src="https://picsum.photos/1200/1200/?image=836" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
    <div class="ui-thumbnail" tabindex="-1" data-key="5">
      <img src="https://picsum.photos/1200/1200/?image=823" alt="" />
      <div class="ui-cuticle" data-flip-key="cuticle"></div>
    </div>
  </div>
  <div class="ui-content">

    <nav class="ui-nav">
      <button id="prev" tabindex="-1" title="Previous">&lt;</button>
      <button id="next" tabindex="-1" title="Next">&gt;</button>
    </nav>

    <div class="ui-articles">
      <article class="ui-article" data-key="0">
        <h2 class="ui-heading">Stephen Shaw</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae cupiditate assumenda nemo delectus totam atque quas suscipit dicta.</p>
      </article>
      <article class="ui-article" data-key="1">
        <h2 class="ui-heading">David Khourshid</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod sapiente soluta iusto molestias ullam. </p>
      </article>
      <article class="ui-article" data-key="2">
        <h2 class="ui-heading">Coding Compadre</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit, amet consectetur adipisicing elit. </p>
      </article>
      <article class="ui-article" data-key="3">
        <h2 class="ui-heading">Boolean Buddy</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur, adipisicing elit. </p>
      </article>
      <article class="ui-article" data-key="4">
        <h2 class="ui-heading">Animation Amigo</h2>
        <p class="ui-paragraph">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias exercitationem voluptatibus</p>
      </article>
      <article class="ui-article" data-key="5">
        <h2 class="ui-heading">Keyframe Companion</h2>
        <p class="ui-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae soluta reprehenderit, ut doloribus corrupti</p>
      </article>
    </div>
  </div>
</div>

希望这有帮助!

关于javascript - 如何自动为已经结构化的图像库制作动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60132338/

文章推荐： mysql - grails:尝试在 mysql 中保存 utf-8 失败

文章推荐： MySQL - 多重联合

文章推荐： javascript - 如何在 Compromise.js 中匹配任何时态的动词

Python word_tokenize 化
我是 python 的新手。我试图找到我的文本的频率分布。这是代码， import nltk nltk.download() import os os.getcwd() text_file=open(
安卓 fragment 化
我对安卓 fragment 感到困惑。我知道内存 fragment 但无法理解什么是 android fragment 问题。虽然我发现很多定义，比如 Android fragmentation re
wordpress - Docker 化 WordPress
尝试对 WordPress 进行 dockerise 我发现了这个场景: 2个数据卷容器，一个用于数据库(bbdd)，另一个用于wordpress文件(wordpress): sudo docker
javascript - 了解页面是否被 iframe 化
这个问题已经有答案了: From the server is there a way to know that my page is being loaded in an Iframe (1 个回答)
php - 如何 docker 化
我正在玩小型服务器，试图对运行在其上的服务进行docker化。为简化起见，假设我必须主要处理:Wordpress和另一项服务。在Docker集线器上有许多用于Wordpress的图像，但是它们似乎都
jquery - 如何使我的新注册设计表单实现 AJAX 化？
我想要发生的是，当帐户成功创建后，提交的表单应该消失，并且应该出现一条消息(取决于注册的状态)。如果成功，他们应该会看到一个简单的“谢谢。请检查您的电子邮件。” 如果不是，那么他们应该会看到一条适当
c# - 添加元数据以对客户进行 strip 化
就是这样，我需要为客户添加一个唯一标识符。通过 strip 元数据。这就是我现在完全构建它的方式，但是我只有最后一部分告诉我用户购买了哪个包。我试着看这里: Plans to stripe 代码在这
java - 是否可以出于测试目的将类包私有(private)化
我有一个类将执行一些复杂的操作，涉及像这样的一些计算: public class ComplexAction { public void someAction(String parameter
java - 使用自定义打包类型对遗留项目进行 Maven 化
这个问题已经有答案了: maven add a local classes directory to module's classpath (1 个回答) 已关闭10 年前。我有一些不应更改的旧 E
Android 相互 fragment 化
我使用 fragment 已经有一段时间了，但我经常遇到一个让我烦恼的问题。 fragment 有时会相互吸引。现在，我设法为此隔离了一个用例，它是这样的: Add fragment A(也使用 ad
html - 包含号码的OL strip 化
我的 html 中有一个 ol 列表，上面有行条纹。看起来行条纹是从数字后面开始的。有没有办法让行条纹从数字开始？我已经包含了正在发生的事情的片段 h4:nth-child(even) {
html - 主菜单 html 化
如何仅使用 css 将附加图像 html 化？如果用纯 css 做不到，那我怎么能至少用一个图像来做最佳答案这不是真正的问题，而是您希望我们为您编写代码。我建议您搜索“css breadcrum
java - 锁拆分与锁 strip 化
以下是 Joshua 的 Effective Java 的摘录: If you do synchronize your class internally, you can use various te
http - REST 化 URL
在这里工作时，我们有一个框向业务合作伙伴提供 XML 提要。对我们的提要的请求是通过指定查询字符串参数和值来定制的。其中一些参数是必需的，但很多不是。例如，我们要求所有请求都指定一个 GUID 来标
c - 如何对像素数据进行位 strip 化？
我有 3 个缓冲区，其中包含在 32 位处理器上运行的 R、G、B 位数据。我需要按以下方式组合三个字节: R[0] = 0b r1r2r3r4r5r6r7r8 G[0] = 0b g1g2g3g4
javascript - 需要帮助了解如何对网站进行 ajax 化
我最近发现了关于如何使用 History.js、jQuery 和 ScrollTo 通过 HTML5 History API 对网站进行 Ajax 化的要点:https://github.com/br
spring - Camel 化 Spring 启动应用程序
我们有一个 Spring Boot 应用程序，由于集成需要，它变得越来越复杂——比如在你这样做之后发送一封电子邮件，或者在你之后广播一条 jms 消息等等。在寻找一些更高级别的抽象时，我遇到了 apa
android - 指定Google Pay token 化
我正在尝试首次实施Google Pay。我面临如何指定gateway和gatewayMarchantId的挑战。我所拥有的是google console帐户，不知道在哪里可以找到此信息。 priva
azure - AWVERIFY 未进行属性(property)化
昨天下午 3 点左右，我为两个想要从一个 Azure 帐户转移到另一个帐户的网站设置了 awverify 记录。到当天结束时，Azure 仍然不允许我添加域，所以我赌了一把，将域和 www 子域重新指
elasticsearch - Elasticsearch Facet token 化
我正在使用terms facet在elasticsearch服务器中获取顶级terms。现在，我的标签"indian-government"不被视为一个标签。将其视为"indian" "governm

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何自动为已经结构化的图像库制作动画？