有没有办法让图片库/旋转木马转到另一边？

Question

我正在尝试设置一个图片库/旋转木马(https://www.dwuser.com/education/content/creating-a-jquery-image-scroller/)，其中一行从右到左，下一行从左到右。它应该看起来像一个带有照片的新贴纸(参见：https://www.welt.de/newsticker/)。

我找到了一些代码来从左到右设置图片库/旋转木马，但我似乎不知道如何才能让它朝另一个方向移动。有谁有主意吗？

我已经尝试过使用html标记选框，但这似乎不是一个好的做法，因为不再推荐使用该标记。我也尝试过使用CSS，但我又学到了(我对编程非常陌生)，任何特效/移动等都应该用js编程。

我希望画廊能以另一种方式运作。

​

$(function() {
  var scroller = $('#scroller div.innerScrollArea');
  var scrollerContent = scroller.children('ul');
  scrollerContent.children().clone().appendTo(scrollerContent);
  var curX = 0;
  scrollerContent.children().each(function() {
    var $this = $(this);
    $this.css('left', curX);
    curX += $this.outerWidth(true);
  });
  var fullW = curX / 2;
  var viewportW = scroller.width();

  // Scrolling speed management
  var controller = {
    curSpeed: 0,
    fullSpeed: 2
  };
  var $controller = $(controller);
  var tweenToNewSpeed = function(newSpeed, duration) {
    if (duration === undefined)
      duration = 600;
    $controller.stop(true).animate({
      curSpeed: newSpeed
    }, duration);
  };

  // Pause on hover
  scroller.hover(function() {
    tweenToNewSpeed(0);
  }, function() {
    tweenToNewSpeed(controller.fullSpeed);
  });

  // Scrolling management; start the automatical scrolling
  var doScroll = function() {
    var curX = scroller.scrollLeft();
    var newX = curX + controller.curSpeed;
    if (newX > fullW * 2 - viewportW)
      newX -= fullW;
    scroller.scrollLeft(newX);
  };
  setInterval(doScroll, 20);
  tweenToNewSpeed(controller.fullSpeed);
});

#scroller {
  width: 100%;
  height: 400px;
  margin: 0 auto;
  position: relative;
}

#scroller .innerScrollArea {
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#scroller ul {
  padding: 0;
  margin: 0;
  position: relative;
}

#scroller li {
  padding: 0;
  margin: 0;
  list-style-type: none;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="scroller" class="marquee">
  <div class="innerScrollArea">
    <ul>
      <li><img src="coffee.jpg" width="600" height="400" /></li>
      <li><img src="containerworker.jpg" width="600" height="400" /></li>
      <li><img src="coffee.jpg" width="600" height="400" /></li>
      <li><img src="containerworker.jpg" width="600" height="400" /></li>
    </ul>
  </div>
</div>

​

Answer 1

要向右滚动，您应该将fullSpeed更改为-2 & add condition，以便在newX溢出时将其重置。

​

$(function() {
  var scroller = $('#scroller div.innerScrollArea');
  var scrollerContent = scroller.children('ul');
  scrollerContent.children().clone().appendTo(scrollerContent);
  var curX = 0;
  scrollerContent.children().each(function() {
    var $this = $(this);
    $this.css('left', curX);
    curX += $this.outerWidth(true);
  });
  var fullW = curX / 2;
  var viewportW = scroller.width();

  // Scrolling speed management
  var controller = {
    curSpeed: 0,
    fullSpeed: -2
  };
  var $controller = $(controller);
  var tweenToNewSpeed = function(newSpeed, duration) {
    if (duration === undefined)
      duration = 600;
    $controller.stop(true).animate({
      curSpeed: newSpeed
    }, duration);
  };

  // Pause on hover
  scroller.hover(function() {
    tweenToNewSpeed(0);
  }, function() {
    tweenToNewSpeed(controller.fullSpeed);
  });

  // Scrolling management; start the automatical scrolling
  var doScroll = function() {
    var curX = scroller.scrollLeft();
    var newX = curX + controller.curSpeed;
    if (newX < fullW) {
      newX = fullW * 2 - viewportW;
    }
    if (newX > fullW * 2 - viewportW)
      newX -= fullW;
    scroller.scrollLeft(newX);
  };
  setInterval(doScroll, 20);
  tweenToNewSpeed(controller.fullSpeed);
});

#scroller {
  width: 100%;
  height: 400px;
  margin: 0 auto;
  position: relative;
}

#scroller .innerScrollArea {
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

#scroller ul {
  padding: 0;
  margin: 0;
  position: relative;
}

#scroller li {
  padding: 0;
  margin: 0;
  list-style-type: none;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="scroller" class="marquee">
  <div class="innerScrollArea">
    <ul>
      <li><img src="coffee.jpg" width="600" height="400" /></li>
      <li><img src="containerworker.jpg" width="600" height="400" /></li>
      <li><img src="coffee.jpg" width="600" height="400" /></li>
      <li><img src="containerworker.jpg" width="600" height="400" /></li>
    </ul>
  </div>
</div>

​