高级滑块自定义

Question

我正在尝试使用Superslides和Bxslider实现以下图像类型的滑块。

滑块说明：

• 黑盒子是积分/停止。
• 蓝盒子是车。
• 每当汽车越过中途停车时，我需要将红色滑块更改为下一个。
• 用户可以使用鼠标滚动或箭头键向前或向后移动汽车。在移动设备上使用向前或向后滑动。

我使用Superslides和Bxslider做了什么 使用bxslider的回调函数为汽车制作动画，但卡住了。

帮助：我需要想法如何实现这样的结果。我可以使用什么样的滑块来实现这样的效果。

参考link，但使用jQuery

Answer 1

(function($) {
        var elem = $.jInvertScroll(['.scroll'],        // an array containing the selector(s) for the elements you want to animate
            {
            height: 6000,                   // optional: define the height the user can scroll, otherwise the overall length will be taken as scrollable height
            onScroll: function(percent) {   //optional: callback function that will be called when the user scrolls down, useful for animating other things on the page
                console.log(percent);
            }
        });

        $(window).resize(function() {
          if ($(window).width() <= 768) {
            elem.destroy();
          }
          else {
            elem.reinitialize();
          }
        });
    }(jQuery));

 html,
body
{
  padding: 0;
  margin: 0;
  font-family: Arial, sans-serif;
}

/* hide horizontal scrollbars, since we use the vertical ones to scroll to the right */
body
{
  overflow-x: hidden;
  background: url('../images/bg.jpg') repeat top left;
}

h1
{
  font-size: 20px;
  font-weight: normal;
  color: #2e6e80;
}

/**
  * important: keep position fixed, you can however use top:0 instead of bottom:0
  * if you want to make it stick to the top of the browser
  */
.scroll
{
  position: fixed;
  bottom: 0;
  left: 0;
}

/**
  * z-index ordering of the different layers, do this for your layers,
  * also assign absolute width (to prevent issues if the script gets executed before the images get loaded)
  */
.horizon
{
  z-index: 1;
  width: 3000px;
}

.middle
{
  z-index: 500;
  width: 4000px;
}

.front
{
  z-index: 1000;
  width: 6000px;
}

<h1>jInvertScroll Example</h1>
    
    <div class="horizon scroll">
        <img src="https://raw.githubusercontent.com/pixxelfactory/jInvertScroll/master/examples/images/horizon.png" alt="" />
    </div>
    <div class="middle scroll">
        <img src="https://raw.githubusercontent.com/pixxelfactory/jInvertScroll/master/examples/images/middle.png" alt="" />
    </div>
    <div class="front scroll">
        <img src="https://raw.githubusercontent.com/pixxelfactory/jInvertScroll/master/examples/images/front.png" alt="" />
    </div>
<script src="http://www.pixxelfactory.net/jInvertScroll/js/jquery.min.js"></script>
<script src="http://www.pixxelfactory.net/jInvertScroll/js/jquery.jInvertScroll.js"></script>