Question

研究时间，我在我的目标问题上留下了空白，希望得到其他开发人员的帮助，并希望能帮助其他有类似问题的人！

我希望构建一个自定义滑块，其中不同的Dom元素被设置为动画，并且每个幻灯片中的自定义动画会循环到下一张幻灯片，直到最后到达最后一张幻灯片，该幻灯片将有一个重播循环的按钮。只需点击一下按钮即可初始化循环。

我正在构建一个类似于：https://stripe.com/checkout

的滑块动画循环

某些动画元素将取决于以下幻灯片，例如（下一张幻灯片可能需要其中一个元素）

*截至目前，我更专注于初始化和播放循环结束。

我目前有一个幻灯片设置的基本结构，以及我的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>

CSS

#bxs1 .animation class here {
    -moz-animation-name:fade-down;
-moz-animation-timing-function:ease;
-moz-animation-duration:1s;
-moz-animation-iteration-count:1;
-moz-animation-direction:normal;
}

@-moz-keyframes fade-down {
0% {
-moz-transform:translateY(-70px);
        opacity:0;
}
100% {
-moz-transform:translateY(0);
      opacity:0.9;
}
}

的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 );

Answer 1

您可能需要检查Twitter Bootstrap轮播支持以获取轮播图像的基本循环。可以调整以在所需的幻灯片上添加按钮：

<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>

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

1 个答案: