时间戳

首页 > 解决方案 > 我可以使用 JavaScript/jQuery 在每个图像更改上添加动画吗？

javascript - 我可以使用 JavaScript/jQuery 在每个图像更改上添加动画吗？

问题描述

我有一张图片幻灯片，可以从 JavaScript 数组中提取图片。我想为每个图像的变化添加一个动画。但是它们会在加载时添加到图像中。

我已经尝试过.animate({})，但它仅适用于加载图像并且不会被删除。

我的 JavaScript：

var i = 0;
var images = [];
var firstSlide = 0;
var time = 1000;

images[0] = 'michael-baird-14942-unsplash.jpg';
images[1] = 'kees-streefkerk-352781-unsplash.jpg';
images[2] = 'hakon-sataoen-1484216-unsplash.jpg';
images[3] = 'mario-silva-1492028-unsplash.jpg';
images[4] = 'will-turner-1474611-unsplash.jpg';

function changeImg() {
    if (i <= images.length && firstSlide == 0) {
      document.slide.src = images[i];
      if (i < images.length) {
        i++;
      } else if (i > 4) {
        document.slide.src = images[0];
      } else {
        i = 0;
      }
      setTimeout("changeImg()", time);
    }
  }

  $('.next').on('click', function() {
    firstSlide = 1;
    i++;
    var ind = (i % 5);
    document.slide.src = images[ind];
  });

  $('.prev').on('click', function() {
    firstSlide = 1;
    i--;
    var ind = (i % 5);
    document.slide.src = images[ind];
  });
  window.onload = changeImg;

我的 CSS：

.slideshow {
  width: 100%;
  height: 75%;
  position: absolute;
  top: 42px;
}

.slideshow img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.next {
  position: absolute;
  right: 0px;
  top: 50%;
  color: white;
  font-size: 30px;
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0px 10px 5px 10px;
  border-radius: 10px 0px 0px 10px;
}

.next:hover,
.prev:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 1);
}

.prev {
  position: absolute;
  left: 0px;
  top: 50%;
  color: white;
  font-size: 30px;
  font-weight: bold;
  padding: 0px 10px 5px 10px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 0px 10px 10px 0px;
}

我的 HTML：

<body>
<div class="slideshow">
      <img name="slide" alt="Slideshow Images" width="100%" height="100%" class="test">
      <a class="next">&#10095;</a>
      <a class="prev">&#10094;</a>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="masterjs.js" charset="utf-8"></script>
</body>

当图像切换到下一个时，我希望有一个动画。示例就像淡入和淡出每张图像到下一张或查看https://www.oakley.com他们的幻灯片在每张图像之间向左或向右滑动。

标签： javascriptcss

解决方案

这取决于您要制作的动画类型。

如果要制作幻灯片动画（沿 X 轴平移），则需要在容器中添加多个img标签，并在每次转换时移动容器。

如果你想要淡入淡出，你可以：

$(document.slide).fadeOut("slow",function(){
   /* change image src here */ 
   $(document.slide).fadeIn("slow"); 
});

更新

幻灯片动画（主要思想）

HTML

<div class="slideshow">
      <div class="slides"></div>
      <a class="next">&#10095;</a>
      <a class="prev">&#10094;</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="masterjs.js" charset="utf-8"></script>

CSS

/* === new lines === */

.slideshow {
  overflow: hidden;
}

.slides {
  white-space: nowrap; 
}

/* === === */

.slideshow {
  width: 100%;
  height: 75%;
  position: absolute;
  top: 42px;
}

.slideshow img {
  object-fit: cover;
  width: 100%;
  height: 100%;  
}

.next {
  position: absolute;
  right: 0px;
  top: 50%;
  color: white;
  font-size: 30px;
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0px 10px 5px 10px;
  border-radius: 10px 0px 0px 10px;
}

.next:hover,
.prev:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 1);
}

.prev {
  position: absolute;
  left: 0px;
  top: 50%;
  color: white;
  font-size: 30px;
  font-weight: bold;
  padding: 0px 10px 5px 10px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 0px 10px 10px 0px;
}

JavaScript

var i = 0;
var images = [];
var time = 3000; //delay between transitions
var slides;
var timeout;

images[0] = 'michael-baird-14942-unsplash.jpg';
images[1] = 'kees-streefkerk-352781-unsplash.jpg';
images[2] = 'hakon-sataoen-1484216-unsplash.jpg';
images[3] = 'mario-silva-1492028-unsplash.jpg';
images[4] = 'will-turner-1474611-unsplash.jpg';

function changeImg( direction ) {

    if( direction == null || direction == 'toLeft' ){
        i < images.length - 1 ? i++ : i = 0; 
    }
    else {
        i > 1 ? i-- : i = images.length - 1; 
    }

    //move slides
    slides.css({
        transform: 'translate(-' + ( i*100 ) + '%)' 
    });

    /*
     clear timeout on every user click faster than time to stop auto moving
     if user didn't click timeout has time to call changeImg
    */
    clearTimeout( timeout ); 
    timeout = setTimeout( changeImg, time );  

}


$(function(){

    slides = $(".slides");

    slides.css({
        transition: ( time / 3) + 'ms' // ( time / 3 ) - animation duration 
    });

    images.forEach(
        function( image, index ){
           slides.append($('<img src="' + images[index] + '" />')); 
        }
    );


    $('.next').on('click', function() { changeImg('toLeft'); });
    $('.prev').on('click', function() { changeImg('toRight'); });

    changeImg();

});

推荐阅读