多个时间间隔的jquery图像滑块

问题描述 投票：0回答：1

我正在尝试实现一个jquery图像滑块。以下是我的代码，有些东西阻止我实现我正在寻找的东西。有人可以向我解释我在这里做错了什么吗？同时，在'motion2'类中，我试图在'motion1'类的单独时间移动滑块图像。如何有效地做到这一点。谢谢

$(function(){
  
  //configuration
  
  let width = $('.two').width();
  let animationSpeed = 2000;
  let pause = 4000;
  let currentSlide = 1;
  
  //cache
  
  let $image = $('.motion1').find('img');
    
  setInterval(function(){
    $image.animate({'margin-left': '-=' + width}, animationSpeed, function(){
      currentSlide++;
      
      if (currentSlide === $image.length){
        currentSlide = 1;
        $image.css({'margin-left': 0});
      }
      
    });
  }, pause);
});
html, body{
  margin:0;
  padding:0;
}

.one{
  height:25rem;
  width:80rem;
  background:orange;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  overflow:hidden;
}

.two{
  border:1px solid;
  height:100%;
  overflow:hidden;
}

  img{
    width:100%;
    height:100%;
    object-fit:cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one">
  <div class='two motion1'>
    <img src="https://www.mtlblog.com/uploads/ded37dd9e380abe15e45eea13ed050c13e5fe206.jpg_facebook.jpg" alt="">
    <img src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="">
  </div>
  <div class='two motion2'>
    <img src="https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1497645355/04-banff-national-park-moraine-lake-canada-150CANADA0617.jpg?itok=O6eAZSSV" alt="">
    <img src="data:image/jpeg;base64,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" alt="">
  </div>
  <div class='two motion1'>
    <img src="http://www.adventureworld.co.nz/advnz/media/destinations/south-america/latin-america/venezuela/tours/canada-best-of-ontario-and-quebec-river-2000.jpg" alt="">
    <img src="https://cdn.theculturetrip.com/wp-content/uploads/2015/11/New-Zealand-%C2%A9-vichie81-Shutterstock.jpg" alt="">
  </div>
</div>
javascript jquery html css3 slider
1个回答
0
投票

好吧，我试图重用一些组件，最终得到了这种肮脏（hackish）的方法。

我确信有一个更好的方法可以做到这一点，但我现在没有时间去处理它...如果你认为这不会有用，请随意评论我会删除答案如果那是案子。

$(function() {
  //configuration
  let width = $('.two').width();
  let animationSpeed = 2000;
  let pause1 = 4000;
  let pause2 = 6000;
  let currentSlide = 0;
  let currentSlideRight = 0;
  let currentSlideLeft = 0;

  //cache
  let $images = $('.motion-middle').find('img');
  let $image = $images[currentSlide];
  
  let $rightImages = $('.motion-right').find('img');
  let $rightImage = $rightImages[currentSlideRight];
  
  let $leftImages = $('.motion-left').find('img');
  let $leftImage = $leftImages[currentSlideLeft];
  
  $([$image, $rightImage, $leftImage]).show();

  setInterval(function() {
    anim($image, $images, currentSlide, 'middle');
  }, 3500);

  setInterval(function() {
    anim($leftImage, $leftImages, currentSlideLeft, 'left');
  }, 4000);

  setInterval(function() {
    anim($rightImage, $rightImages, currentSlideRight, 'right');
  }, 5500);

function anim(img, imageArray, slideIdx, position) {
    $(img).animate({
      "margin-left": -width
    }, animationSpeed, function() {
       nextImg(img, imageArray, slideIdx, position);
    });
  }
  
  function nextImg(img, imageArray, idx, position){
    idx++;
    $(img).hide();    
    
      // reset
      if (idx >= imageArray.length) {
        idx = 0;
      }      
      
      var imgObj;

      switch(position){
        case 'left':
          $leftImage = imageArray[idx];
          imgObj = $leftImage;
          currentSlideLeft = idx;
          break;
          
        case 'middle':
          $image = imageArray[idx];
          imgObj = $image;
          currentSlide = idx;
          break;
          
        case 'right':
          $rightImage = imageArray[idx];
          imgObj = $rightImage;
          currentSlideRight = idx;
          break;
      }
      
      $(imgObj).css("margin-left",0).show();    
  }
});
html,
body {
  margin: 0;
  padding: 0;
}

.one {
  height: 25rem;
  width: 80rem;
  background: orange;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  overflow: hidden;
}

.two {
  border: 1px solid;
  height: 100%;
  overflow: hidden;
}

.two>img {
  display: none;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="one">
  <!-- left -->
  <div class='two motion-left'>
    <!--image 1-->
    <img src="https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1497645355/04-banff-national-park-moraine-lake-canada-150CANADA0617.jpg?itok=O6eAZSSV" alt="">
    <!--image 2-->
    <img src="https://cdn.theculturetrip.com/wp-content/uploads/2015/11/New-Zealand-%C2%A9-vichie81-Shutterstock.jpg" alt="">
    <!--image 3-->
    <img src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="">
  </div>

<!-- middle -->
  <div class='two motion-middle'>
    <!--image 1-->
    <img src="https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1497645355/04-banff-national-park-moraine-lake-canada-150CANADA0617.jpg?itok=O6eAZSSV" alt="">
    <!--image 2-->
    <img src="https://cdn.theculturetrip.com/wp-content/uploads/2015/11/New-Zealand-%C2%A9-vichie81-Shutterstock.jpg" alt="">
    <!--image 3-->
    <img src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="">
  </div>

<!-- right -->
  <div class='two motion-right'>
    <!--image 1-->
    <img src="https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1497645355/04-banff-national-park-moraine-lake-canada-150CANADA0617.jpg?itok=O6eAZSSV" alt="">
    <!--image 2-->
    <img src="https://cdn.theculturetrip.com/wp-content/uploads/2015/11/New-Zealand-%C2%A9-vichie81-Shutterstock.jpg" alt="">
    <!--image 3-->
    <img src="https://wallpaperbrowse.com/media/images/soap-bubble-1958650_960_720.jpg" alt="">
  </div>

</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.