使用CSS动画和javascript构建自定义滑块

经过数小时的研究，我在我的目标问题上画了一个空白，希望从其他开发人员那里得到一些帮助，同时也希望能帮助其他有类似问题的人

我希望构建一个自定义滑块，对不同的Dom元素设置动画，并在每个幻灯片中生成自定义动画，循环到下一张幻灯片，直到最后到达最后一张幻灯片，这将有一个按钮来重播循环。单击按钮即可初始化启动循环

我正在构建一个滑块动画循环，类似于：

正在设置动画的某些元素将取决于下一张幻灯片，例如（可能需要其中一个元素才能在下一张幻灯片上完成效果）

*到现在为止，我更专注于草签和打完循环

我目前有一个幻灯片设置的基本结构，在javascript代码中有一个想法，可以初始化循环，但不太明白如何实际使它以循环的方式移动到下一张幻灯片，同时通过我在某些元素上的类，用我设计的CSS控制一些元素

我添加CSS只是为了获得更多信息，更简洁一点

Html

    <div id="main" class="site-main">
        <section id="carousel">
            <div class="bx-wrapper" style="max-width: 100%;">
                <div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 500px;">
                    <ul class="bxslider_simp"  >
                        <li class="bxslide page" id="bxs1">

                            <a href="#" id="anim-start"> The Trigger to Start slide</a>
                            <!-- content of the slide goes here -->
                        </li>
                        <li class="bxslide page" id="bxs2">
                                  <!-- content of the slide goes here -->
                        </li>
                               <!-- content of the slide goes here -->
                        </li>
                        <li class="bxslide page" id="bxs4">
                                   <!-- content of the slide goes here -->
                        </li>
                        <li class="bxslide page" id="bxs5">
                                    <!-- content of the slide goes here -->
                        </li>
                        <li class="bxslide page" id="bxs6">
                                   <!-- content of the slide goes here -->
                        </li>
                        <li class="bxslide page" id="bxs7">
                              <!-- content of the slide goes here -->
                        </li>
                    </ul>
                </div>
            </div>
        </section>
    </div>

    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/application.js"></script>

    <script type="text/javascript">
       $('#carousel').animationLoop();
    </script>

application.js

  (function( $ ) {


//gloabl definitions
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;


//gloabl definitions for animation loop
var startTrigger = document.getElementById('anim-start');

var slide1 = document.getElementById('bxs1');
var slide2 = document.getElementById('bxs2');

// startTrigger.addEventListener("animationstart", MoveSlides, false);

//core plugin features & call
$.fn.animationLoop = function(options) {

    //Animation Loop Logic

    function MoveSlides(options) {

        if(startTrigger) {

            requestAnimationFrame(function() {

                options.slide1++;
                options.slide2++;
                MoveSlides();
            });
        }
    }


};

})( jQuery );

---

您可能需要检查Twitter引导转盘对转盘图像基本循环的支持。可以调整以在所需幻灯片上添加按钮：

<script>
$(document).ready(function(){
$('.carousel').carousel();
interval: 5000
});
</script>

<div id="this-carousel-id" class="carousel slide"><!-- class of slide for animation     -->
<div class="carousel-inner">
<div class="item active"><!-- class of active since it's the first item -->
<img class="nivo-main-image" src="<location of image1>" style="display: inline; height: auto; width: 1286px;"> 
  <!-- <div class="carousel-caption">
    <p>Caption text here</p>
  </div> -->
</div>
<div class="item">
  <img class="nivo-main-image" src="<location of image1>" style="display: inline; height: auto; width: 1286px;"> 
  <!-- <div class="carousel-caption">
    <p>Caption text here</p>
  </div> -->
  </div>
  </div>
  </div>

$（文档）.ready（函数（）{
$（'.carousel'）.carousel（）；
间隔时间：5000
});
“style=”显示：内联；高度：自动；宽度：1286px；"> 
“style=”显示：内嵌；高度：自动；宽度：1286px；“>

<script>
$(document).ready(function(){
$('.carousel').carousel();
interval: 5000
});
</script>

<div id="this-carousel-id" class="carousel slide"><!-- class of slide for animation     -->
<div class="carousel-inner">
<div class="item active"><!-- class of active since it's the first item -->
<img class="nivo-main-image" src="<location of image1>" style="display: inline; height: auto; width: 1286px;"> 
  <!-- <div class="carousel-caption">
    <p>Caption text here</p>
  </div> -->
</div>
<div class="item">
  <img class="nivo-main-image" src="<location of image1>" style="display: inline; height: auto; width: 1286px;"> 
  <!-- <div class="carousel-caption">
    <p>Caption text here</p>
  </div> -->
  </div>
  </div>
  </div>