jQuery CSS - 滑块滑动动画

Question

更新：更新了代码并添加了一个更好的示例来明确我想要实现的目标。

我已经用 jQuery 构建了一个滑块。 我给每个元素一个类.active，它显示隐藏的元素。

现在我想要一个滑动动画，以便图像从左到右。

问题是我已经有一个复杂的代码，我不知道如何实现。

这是我想要实现的示例：https://bootsnipp.com/snippets/Padax

这里是代码

https://codepen.io/Insane415/pen/NggLxe

<div class="slider">
  <div class="row">
    <div class="col-md-4">
      <div class="image-holder">
        <img src="http://via.placeholder.com/350x150" style="display:none;" class="active">
        <img src="http://via.placeholder.com/350x150" style="display:none;">
        <img src="http://via.placeholder.com/350x150" style="display:none;">
        <img src="http://via.placeholder.com/350x150" style="display:none;">
      </div>
      <div class="bullet-points">
        <a href="_self" class="active-bullet">•</a>
        <a href="_self">•</a>
        <a href="_self">•</a>
        <a href="_self">•</a>
      </div>
    </div>
    <div class="col-md-2">
      <div class="thumbnails">
        <img src="http://via.placeholder.com/350x150" class="active-thumbnail">
        <img src="http://via.placeholder.com/350x150">
        <img src="http://via.placeholder.com/350x150">
        <img src="http://via.placeholder.com/350x150">
      </div>
    </div>
    <div class="col-md-6 center-me" style="height:100%;">
      <div class="text-holder">
        <div class="text active">
          <p>Lorem Ipsum</p>
          <h2>Giant Heading 1</h2>
          <p>Just some more text</p>
          <a href="/de/tariffinder" class="button">zur Preisübersicht</a>
        </div>
        <div class="text">
          <p>Lorem Ipsum</p>
          <h2>Giant Heading 2</h2>
          <p>Some more text</p>
          <a href="/de/tariffinder" class="button">zur Preisübersicht</a>
        </div>
        <div class="text">
          <p>Lorem Ipsum</p>
          <h2>Giant Heading 3</h2>
          <p>Some more text</p>
          <a href="/de/tariffinder" class="button">zur Preisübersicht</a>
        </div>
        <div class="text">
          <p>Lorem Ipsum</p>
          <h2>Giant Heading 4</h2>
          <p>Some more text</p>
          <a href="/de/tariffinder" class="button">zur Preisübersicht</a>
        </div>
      </div>
    </div>

  </div>

.text-holder .text p{margin: 0!important;}
.slider{
  padding: 15px;
  margin-top: 50px;
  background: url('/images/content/slider/Banner_Hintergrund_telbes-01.jpg');
  background-repeat: no-repeat!important;
  background-size: cover!important;
  display: inline-block;
  width: 100%;
  border: 1px solid #ddd;
}

.slider .bullet-points a{
    color: #ccc;
}

.thumbnails{

  height: 195.11px;
  margin-left: -25px;
}

.thumbnails img{
  display:block;
  max-height: 31.65%;
  margin-bottom: 5px;
}

.thumbnails img:hover{
  cursor: pointer;
}

.text-holder{
  margin-left: 0px;
  height: 100%;
}

.text-holder .text{
  display: none;
}

/*display active image*/

.active{
  display: block!important;
}

/*hide thumbnail when image is active*/

.active-thumbnail{
  display: none!important;
}

.bullet-points{
  display: block;
  text-align: center;
  margin-top: 15px;
}

.bullet-points a{
  font-size: 40px;
  text-decoration: none;
  color: #ccc;
}

.active-bullet{
  color: #E22C26!important;
}

/*.image-holder{
  max-width: 350px!important;
}

.image-holder img{
  max-width: 350px!important;
}*/

.image-holder img{
  /* text-align: center!important; */
  margin: 0 auto;
}

.bullet-points a:hover{
  color: #E22C26!important;
}

.center-me{
  margin-top: 4%;
}

.text-holder a{
  margin-top: 15px;
    padding: 10px 20px 10px 20px;
}

.text-holder a:hover{
    padding:10px 20px 10px 20px;
}

.text-holder{
  font-size: 130%;
  color: inherit;
}

.text-holder h2{
  font-size: 200%;
}

    $(document).ready(function() {

  var images = [$(".image-holder img:first-child"), $(".image-holder img:nth-of-type(2)"), $(".image-holder img:nth-of-type(3)"), $(".image-holder img:last-child")];
  var thumbnails = [$(".thumbnails img:first-child"), $(".thumbnails img:nth-of-type(2)"), $(".thumbnails img:nth-of-type(3)"), $(".thumbnails img:last-child")];
  var text = [$(".text-holder .text:first-child"), $(".text-holder .text:nth-of-type(2)"), $(".text-holder .text:nth-of-type(3)"), $(".text-holder .text:last-child")];
  var backgrounds = ["url('/images/content/slider/Banner_Hintergrund_telbes-01.jpg')", "url('/images/content/slider/Banner_Hintergrund_telbes-02.jpg')", "url('/images/content/slider/Banner_Hintergrund_telbes-03.jpg')", "url('/images/content/slider/Banner_Hintergrund_telbes-04.jpg')"];
  var bullets = [$(".bullet-points a:first-child"), $(".bullet-points a:nth-of-type(2)"), $(".bullet-points a:nth-of-type(3)"), $(".bullet-points a:last-child")];

  var i = 1;
  var currentSlide = 1;
  var time = 3000;
  var sliderTimer = setInterval(slider, time);


  // slider navigation
  $('.bullet-points a, .thumbnails img').click(function(e) {
    e.preventDefault();
    var pos = $(this).index();
    clearInterval(sliderTimer); // stop auto slideshow
    sliderTimer = false;
    slider(pos);
  });

  function slider(pos) {
    currentSlide = i;
    if (typeof(pos) !== 'undefined') {
      i = pos;
      images[currentSlide - 1].removeClass("active").addClass('transition');
      text[currentSlide - 1].removeClass("active");
      thumbnails[currentSlide - 1].removeClass("active-thumbnail");
      bullets[currentSlide - 1].removeClass("active-bullet");
    }
    if (i != 0) {
      images[i - 1].removeClass("active").addClass('transition');
      text[i - 1].removeClass("active");
      thumbnails[i - 1].removeClass("active-thumbnail");
      bullets[i - 1].removeClass("active-bullet");
    }
    if (i == images.length) { i = 0 }
    images[i].addClass("active");
    setTimeout(function() {
      $(".image-holder img").removeClass('transition');
    },1000);
    text[i].addClass("active");
    thumbnails[i].addClass("active-thumbnail");
    bullets[i].addClass("active-bullet");
    i++;
    if (!sliderTimer) {
      sliderTimer = setInterval(slider, time); // start auto slideshow
    }
  }

});

Answer 1

你可以使用 CSS3 来做这样的事情，

给每张图片一个绝对位置，给每张图片一个宽度和高度值。

设置图像容器高度，使您的滑块寻呼机位于图像下方。

我同时使用@keyframes 和transition 来演示如何实现效果。

在你的 javascript 滑块函数中，我添加了一个函数来添加和删除过渡。

$(document).ready(function() {

  var images = [$(".image-holder img:first-child"), $(".image-holder img:nth-of-type(2)"), $(".image-holder img:nth-of-type(3)"), $(".image-holder img:last-child")];
  var thumbnails = [$(".thumbnails img:first-child"), $(".thumbnails img:nth-of-type(2)"), $(".thumbnails img:nth-of-type(3)"), $(".thumbnails img:last-child")];
  var text = [$(".text-holder .text:first-child"), $(".text-holder .text:nth-of-type(2)"), $(".text-holder .text:nth-of-type(3)"), $(".text-holder .text:last-child")];
  var bullets = [$(".bullet-points a:first-child"), $(".bullet-points a:nth-of-type(2)"), $(".bullet-points a:nth-of-type(3)"), $(".bullet-points a:last-child")];

  var i = 1;
  var currentSlide = 1;
  var time = 3000;
  var sliderTimer = setInterval(slider, time);


  // slider navigation
  $('.bullet-points a, .thumbnails img').click(function(e) {
    e.preventDefault();
    var pos = $(this).index();
    clearInterval(sliderTimer); // stop auto slideshow
    sliderTimer = false;
    slider(pos);
  });

  function slider(pos) {
    currentSlide = i;
    if (typeof(pos) !== 'undefined') {
      i = pos;
      images[currentSlide - 1].removeClass("active").addClass('transition');
      text[currentSlide - 1].removeClass("active");
      thumbnails[currentSlide - 1].removeClass("active-thumbnail");
      bullets[currentSlide - 1].removeClass("active-bullet");
    }
    if (i != 0) {
      images[i - 1].removeClass("active").addClass('transition');
      text[i - 1].removeClass("active");
      thumbnails[i - 1].removeClass("active-thumbnail");
      bullets[i - 1].removeClass("active-bullet");
    }
    if (i == images.length) { i = 0 }
    images[i].addClass("active");
    setTimeout(function() {
      $(".image-holder img").removeClass('transition');
    },1000);
    text[i].addClass("active");
    thumbnails[i].addClass("active-thumbnail");
    bullets[i].addClass("active-bullet");
    i++;
    if (!sliderTimer) {
      sliderTimer = setInterval(slider, time); // start auto slideshow
    }
  }

});

/*how I could allign the images in one row*/
.image-holder {
    display: inline-block;
    width: 100%;
    height: 220px;
}

.image-holder img {
    display: block;
    width: 200px;
    height: 200px;
    margin: 0;
    opacity: 0;
    top: 0;
    left: 100%;
    transition: left ease 1s;
    position: absolute;
}
.image-holder img.transition {
  animation: moveSlider ease 2s;
  opacity: 1;
}
@keyframes moveSlider {
  0% {
    left: 50%;
  }
  50% {
    left: -100%;
  }
  100% {
    opacity: 0;
    left: 100%;
  }
}
.image-holder img.active {
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
}

/*END image row allignment*/

.text-holder p{margin: 0;}
.slider{
  padding:15px;
  margin-top: 50px;
  /*background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTHzNrZnq-4-FItozqSu2ZWCBXW4LjWKTlkOOgDlZFj-JtdTuclVQ');*/
  background-color: blue;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  width: 100%;
}

.thumbnails {
  height: 100%;
}

.thumbnails img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 5px;
}

.thumbnails img:hover{
  cursor: pointer;
}


.text-holder .text {
  display: none;
}
.text-holder .text.active {
  display: block;
}

/*display active image*/

.active {
}

.active-bullet{
  color: #E22C26!important;
}

/*hide thumbnail when image is active*/

.active-thumbnail{
  display: none!important;
}

.bullet-points{
  display: block;
  text-align: center;
}

.bullet-points a{
  font-size: 40px;
  text-decoration: none;
  color: #ccc;
  
}

.bullet-points a:hover{
  color: #E22C26!important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
      <div class="row">
        <div class="col-md-4">
          <div class="image-holder">
            <img src="https://res.cloudinary.com/somestuff/image/upload/v1497993474/money_gsliha.jpg" class="active">
            <img src="https://res.cloudinary.com/somestuff/image/upload/v1497993472/rap_zduqat.jpg">
            <img src="https://res.cloudinary.com/somestuff/image/upload/v1497993471/rauch_oikfed.jpg">
            <img src="https://res.cloudinary.com/somestuff/image/upload/v1497993471/girls_x07ay8.jpg">
          </div>
          <div class="bullet-points">
            <a href="_self" class="active-bullet">&bull;</a>
            <a href="_self">&bull;</a>
            <a href="_self">&bull;</a>
            <a href="_self">&bull;</a>
          </div>
        </div>
        <div class="col-md-1">
          <div class="thumbnails">
            <img src="https://res.cloudinary.com/somestuff/image/upload/v1497993474/money_gsliha.jpg" class="active-thumbnail">
            <img src="https://res.cloudinary.com/somestuff/image/upload/v1497993472/rap_zduqat.jpg">
            <img src="https://res.cloudinary.com/somestuff/image/upload/v1497993471/rauch_oikfed.jpg">
            <img src="https://res.cloudinary.com/somestuff/image/upload/v1497993471/girls_x07ay8.jpg">
          </div>
        </div>
        <div class="col-md-7">
          <div class="text-holder">
            <div class="text active">
              <p>Lorem Ipsum</p>
              <h1>Giant Heading 1</h1>
              <p>Some more text</p>
            </div>
            <div class="text">
              <p>Lorem Ipsum</p>
              <h1>Giant Heading 2</h1>
              <p>Some more text</p>
            </div>
            <div class="text">
              <p>Lorem Ipsum</p>
              <h1>Giant Heading 3</h1>
              <p>Some more text</p>
            </div>
            <div class="text">
              <p>Lorem Ipsum</p>
              <h1>Giant Heading 4</h1>
              <p>Some more text</p>
            </div>
          </div>
        </div>

      </div>
</div>