jQuery中的Bootstrap轮播垂直动画

Question

我想将 CSS 代码转换为 jQuery（Bootstrap carousel animate）。因为我有一个客户想要一个与 IE8 兼容的网站，而转换属性不是。

所以我尝试将 CSS 代码转换为 jQuery，但我是一个真正的菜鸟。

更多，我希望以前的“.item”比新的“.item”稍稍落后

if($(".carousel.vertical").is(".active"))
  $(this).animate({top:0});
});

if($(".carousel.vertical").is(".next"))
  $(this).animate({top:400px});
});

if($(".carousel.vertical").is(".prev"))
  $(this).animate({top:-400px});
});

等等……

Answer 1

类似这样的：

var carousel_timer, // timer variable (in case you want to stop the animation)
    $carousel_container, // carousel container in jQuery object
    $carousel_slides; // all slides in jQuery object
var carousel_activeslide = 0; // current slide (index)
var carousel_interval = 5000; // time between scrolls
var carousel_duration = 1000; // animation time


function slideCarousel() {

  // Animate the current slide
  $carousel_slides.eq(carousel_activeslide).animate({
    'top': '0%'
  }, carousel_duration, function(){
    // Reset previous slide to neutral
    $carousel_slides.removeClass("prev");

    // set current slide to previous
    $(this).removeClass("cur").addClass("prev");

    // Calculate next slide's index
    carousel_activeslide++;
    if (carousel_activeslide == $carousel_slides.length) {
      // Get the first one to start over again
      carousel_activeslide = 0;
    }

    // Put the next slide in position and set it to current
    $carousel_slides.eq(carousel_activeslide).css({'top':'100%'}).removeClass("next").addClass("cur");

    // Calculate the new next slide index and put it in place
    var next = ((carousel_activeslide+1)==$carousel_slides.length)? 0: (carousel_activeslide+1);
    $carousel_slides.eq(next).css({'top':'100%'}).addClass("next");

    // Set-up the timer for the next slide action
    carousel_timer = setTimeout(slideCarousel, carousel_interval);
  });
  

}


$(document).ready(function(){

  // Init the carousel
  $carousel_slides = $("#carousel > div");
  
  // Check if there are enough slides to scroll
  if ($carousel_slides.length > 1) {
  
    // set current, previous and next slides
    $carousel_slides.first().addClass("cur");
    $carousel_slides.last().addClass("prev");
    $carousel_slides.eq(carousel_activeslide).next().addClass("next");
    
    // Start the carousel
    slideCarousel();
  }

});

#carousel {
  position: relative;
  width: 300px;
  height: 100px;
  overflow: hidden;
}

#carousel > div {
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
  position: absolute;
  top: 0%;
}

#carousel > div.prev {
  z-index: 2;
}
#carousel > div.cur {
  z-index: 3;
}
#carousel > div.next {
  z-index: 4;
  top: 100%;
}

.red {
  background-color: red;
}
.purple {
  background-color: purple;
}
.green {
  background-color: green;
}
.yellow {
  background-color: yellow;
}
.blue {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div id="carousel">
  <div class="red">Item 1</div>
  <div class="yellow">Item 2</div>
  <div class="green">Item 3</div>
  <div class="blue">Item 4</div>
  <div class="purple">Item 5</div>
</div>