时间戳

首页 > 解决方案 > 如何制作滑块Jquery的动画

jquery - 如何制作滑块Jquery的动画

问题描述

我使用了一个代码示例。但我不太擅长 jQuery。现在我的幻灯片立即改变，但我想做出平滑的改变。我该怎么做？我尝试了一些带有动画的东西，但它是在改变之后产生的。如何在更改期间创建动画？

function MultipleSlider() {
  $('.carosel-control-right').click(function() {
    $(this).parent().find('.carosel-item').first().insertAfter($(this).parent().find('.carosel-item').last());
  });
  $('.carosel-control-left').click(function() {
    $(this).blur();
    $(this).parent().find('.carosel-item').last().insertBefore($(this).parent().find('.carosel-item').first());
  });
}
MultipleSlider();
$(function() {
  $('.glyphicon-chevron-right').each(function() {
    var button = $(this);
    setInterval(function() {
      button.click();
    }, 5000);
  });
});
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid p-0 text-center">
  <div class="container position-relative p-0">
    <div id="carosel" class="carosel" id="carosel1" data-interval="500">
      <div class="carosel-inner">
        <div class="carosel-item col-6 col-md-4 col-lg-3 ml-0">
          <div class="multypleslide1"></div>
          <div class="multyplestext">
            <p class="pl-3 text-left">Lorem ipsum dolor sit amet, consectetur adipiscingd </p>
          </div>
          <div class="multyplestextbot">
            <p class="pl-3 text-left" style="color:green">Lifestyle <i style="color:grey" class="far fa-clock"></i>
              <font style="color:grey;font-size:0.8rem;">Dec.21</font>
            </p>
          </div>
        </div>
        <div class="carosel-item col-6 col-md-4 col-lg-3 ml-0">
          <div class="multypleslide2"></div>
          <div class="multyplestext">
            <p class="pl-3 text-left">Lorem ipsum dolor sit amet, ctetur adipiscing</p>
          </div>
          <div class="multyplestextbot">
            <p class="pl-3 text-left" style="color:darkblue">Sport <i style="color:grey" class="far fa-clock"></i>
              <font style="color:grey;font-size:0.8rem;">Dec.21</font>
            </p>
          </div>
        </div>
        <div class="carosel-item col-6 col-md-4 col-lg-3 ml-0">
          <div class="multypleslide3"></div>
          <div class="multyplestext">
            <p class="pl-3 text-left">Lorem ipsum dolor sit amet, ctetur adipiscing</p>
          </div>
          <div class="multyplestextbot">
            <p class="pl-3 text-left" style="color:purple">Music <i style="color:grey" class="far fa-clock"></i>
              <font style="color:grey;font-size:0.8rem;">Dec.21</font>
            </p>
          </div>
        </div>
        <div class="carosel-item col-6 col-md-4 col-lg-3 ml-0">
          <div class="multypleslide4"></div>
          <div class="multyplestext">
            <p class="pl-3 text-left">Lorem ipsum dolor sit amet, consectetur adipiscing </p>
          </div>
          <div class="multyplestextbot">
            <p class="pl-3 text-left" style="color:green">Lifestyle <i style="color:grey" class="far fa-clock"></i>
              <font style="color:grey;font-size:0.8rem;">Dec.21</font>
            </p>
          </div>
        </div>
        <div class="carosel-item col-6 col-md-4 col-lg-3 ml-0">
          <div class="multypleslide5"></div>
          <div class="multyplestext">
            <p class="pl-3 text-left">Lorem ipsum dolor sit amet, consectetur a</p>
          </div>
          <div class="multyplestextbot">
            <p class="pl-3 text-left" style="color:orange">Business <i style="color:grey" class="far fa-clock"></i>
              <font style="color:grey;font-size:0.8rem;">Dec.21</font>
            </p>
          </div>
        </div>
      </div>
    </div>
    <a class="carosel-control fa fa-angle-left carosel-control-left glyphicon glyphicon-chevron-left"></a>
    <a class="carosel-control fa fa-angle-right carosel-control-right glyphicon glyphicon-chevron-right" id="nextMultipleSlider"></a>
  </div>
</div>

标签： jquerycss

解决方案

看看淡入/淡出

function MultipleSlider() {
  $('.carosel-control-right').click(function() {
    const $parent = $(this).parent(); // cache the parent
    $parent.fadeOut(function() { // after fading out, run the find
      $parent.find('.carosel-item').first().insertAfter($parent.find('.carosel-item').last())
      $parent.fadeIn(); // and fade back in
    })      
  })
  $('.carosel-control-left').click(function() {
    $(this).blur();
    $(this).parent().find('.carosel-item').last().insertBefore($(this).parent().find('.carosel-item').first());
  });
}
MultipleSlider();
$(function() {
  $('.glyphicon-chevron-right').each(function() {
    var button = $(this);
    setInterval(function() {
      button.click();
    }, 5000);
  });
});
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid p-0 text-center">
  <div class="container position-relative p-0">
    <div id="carosel" class="carosel" id="carosel1" data-interval="500">
      <div class="carosel-inner">
        <div class="carosel-item col-6 col-md-4 col-lg-3 ml-0">
          <div class="multypleslide1"></div>
          <div class="multyplestext">
            <p class="pl-3 text-left">Lorem ipsum dolor sit amet, consectetur adipiscingd </p>
          </div>
          <div class="multyplestextbot">
            <p class="pl-3 text-left" style="color:green">Lifestyle <i style="color:grey" class="far fa-clock"></i>
              <font style="color:grey;font-size:0.8rem;">Dec.21</font>
            </p>
          </div>
        </div>
        <div class="carosel-item col-6 col-md-4 col-lg-3 ml-0">
          <div class="multypleslide2"></div>
          <div class="multyplestext">
            <p class="pl-3 text-left">Lorem ipsum dolor sit amet, ctetur adipiscing</p>
          </div>
          <div class="multyplestextbot">
            <p class="pl-3 text-left" style="color:darkblue">Sport <i style="color:grey" class="far fa-clock"></i>
              <font style="color:grey;font-size:0.8rem;">Dec.21</font>
            </p>
          </div>
        </div>
        <div class="carosel-item col-6 col-md-4 col-lg-3 ml-0">
          <div class="multypleslide3"></div>
          <div class="multyplestext">
            <p class="pl-3 text-left">Lorem ipsum dolor sit amet, ctetur adipiscing</p>
          </div>
          <div class="multyplestextbot">
            <p class="pl-3 text-left" style="color:purple">Music <i style="color:grey" class="far fa-clock"></i>
              <font style="color:grey;font-size:0.8rem;">Dec.21</font>
            </p>
          </div>
        </div>
        <div class="carosel-item col-6 col-md-4 col-lg-3 ml-0">
          <div class="multypleslide4"></div>
          <div class="multyplestext">
            <p class="pl-3 text-left">Lorem ipsum dolor sit amet, consectetur adipiscing </p>
          </div>
          <div class="multyplestextbot">
            <p class="pl-3 text-left" style="color:green">Lifestyle <i style="color:grey" class="far fa-clock"></i>
              <font style="color:grey;font-size:0.8rem;">Dec.21</font>
            </p>
          </div>
        </div>
        <div class="carosel-item col-6 col-md-4 col-lg-3 ml-0">
          <div class="multypleslide5"></div>
          <div class="multyplestext">
            <p class="pl-3 text-left">Lorem ipsum dolor sit amet, consectetur a</p>
          </div>
          <div class="multyplestextbot">
            <p class="pl-3 text-left" style="color:orange">Business <i style="color:grey" class="far fa-clock"></i>
              <font style="color:grey;font-size:0.8rem;">Dec.21</font>
            </p>
          </div>
        </div>
      </div>
    </div>
    <a class="carosel-control fa fa-angle-left carosel-control-left glyphicon glyphicon-chevron-left"></a>
    <a class="carosel-control fa fa-angle-right carosel-control-right glyphicon glyphicon-chevron-right" id="nextMultipleSlider"></a>
  </div>
</div>

推荐阅读