从不同方向向内滑动图像

Question

我想让第一张图片从左到右滑动。第二张图像从左向右滑动，第三张图像将从下到上滑动。我设法从左到右滑动第一个图像，我在stackoverflow上找到了答案。但是当我修改脚本＆amp; css对于其他图像，它们没有滑动。我对javascript知之甚少。

$(document).ready(function() {
  function animateImgs() {
    $('ul.slide1 li:not(.visible)').first().animate({
      'margin-right': '500px'
    }, 2000, function() {
      $(this).addClass('visible');
      animateImgs();
    });
  }
  animateImgs();
});

.content {
  position: relative;
  margin: 0 auto;
  top: 0;
  left: 0;
  width: 500px;
  height: 500px;
  border: 1px solid #000;
  overflow: hidden;
}

img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
}

.img1 {
  max-width: 300px;
  max-height: 300px;
  z-index: 2;
}

.img2 {
  max-width: 260px;
  max-height: 260px;
  z-index: 3;
  left: 200px;
  top: 100px;
}

.img3 {
  max-width: 200px;
  max-height: 200px;
  z-index: 4;
  left: 65px;
  top: 235px;
}


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

ul {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

ul.slide1 li {
  float: right;
  margin: 0 10px 0 0;
  margin-right: 9999px;
  list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="content">
  <ul class="slide1">
    <li>
      <img src="http://www.pngmart.com/files/4/Chrysanthemum-Transparent-Background.png" class="img1 slideLeft" />
    </li>
  </ul>
  <img src="http://www.estanciavitoria.com/en/images/sobre_planta.png" class="img2 slideRight" />
  <ul class="slide3">
    <li>
      <img src="https://s-media-cache-ak0.pinimg.com/originals/4d/09/e4/4d09e455070957363b2c0660a0d8cfef.png" class="img3 slideUp" />
    </li>
  </ul>
</div>

Answer 1

步骤：

• 使用类slideContent
定义容器元素
• 在容器内定义具有类slide
的幻灯片元素
• 使用slideUp，slideDown，slideLeft或slideRight
指定幻灯片元素的滑动方向
• 指定data-margin以通过滑动
将元素放入容器中

  

不要在CSS中定义以下内容（而是在slide元素中使用data-margin属性）：

     

margin-bottom slideUp元素

     

margin-top slideDown元素

     

margin-right slideLeft元素

     

margin-left slideRight元素

$(document).ready(function() {

  function animateImgs() {
    // Animation duration
    var duration = 200;

    // Get element reference needs to be shown
    var el = $('.slideContent .slide:not(.visible)').first();

    if (el.length === 0) {
      console.log('No more elements found');
      return;
    }

    // Read the margin value
    var marginValue = el.attr('data-margin');

    // Direction
    var marginDirection,
      animationProp = {};

    // Animate now
    if (el.hasClass('slideLeft')) {
      marginDirection = 'margin-right';
    } else if (el.hasClass('slideRight')) {
      marginDirection = 'margin-left';
    } else if (el.hasClass('slideUp')) {
      marginDirection = 'margin-bottom'
    } else if (el.hasClass('slideDown')) {
      marginDirection = 'margin-top'
    }

    if (typeof marginDirection === 'undefined') {
      // No valid animation direction defined
      console.log('Invalid animation direction');
      return;
    }

    animationProp[marginDirection] = marginValue;
    el.animate(animationProp, duration, function() {
      $(this).addClass('visible');
      animateImgs();
    });
  }

  animateImgs();

});

.slideContent {
  position: relative;
  margin: 0 auto;
  top: 0;
  left: 0;
  width: 500px;
  height: 500px;
  border: 1px solid #000;
  overflow: hidden;
}

.slideContent .slide {
  position: absolute;
}

.slideContent .slideLeft {
  right: -100%
}

.slideContent .slideRight {
  left: -100%
}

.slideContent .slideUp {
  bottom: -100%
}

img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.img1 {
  max-width: 300px;
  max-height: 300px;
}

.img2 {
  max-width: 260px;
  max-height: 260px;
  top: 100px;
}

.img3 {
  max-width: 200px;
  max-height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slideContent">
  <img src="http://www.pngmart.com/files/4/Chrysanthemum-Transparent-Background.png" data-margin="500px" class="img1 slide slideLeft" />
  <img src="http://www.estanciavitoria.com/en/images/sobre_planta.png" data-margin="600px" class="img2 slide slideRight" />
  <img src="https://s-media-cache-ak0.pinimg.com/originals/4d/09/e4/4d09e455070957363b2c0660a0d8cfef.png" data-margin="600px" class="img3 slide slideUp" />
</div>