有没有办法让图像gallery/carousel走到另一边？

Question

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

我找到了一些代码来设置图像 gallery/carousel 从左到右，但我似乎无法弄清楚如何让它向另一方向移动。有人有想法吗？

已经尝试使用 html 标签选取框，但这似乎不是一个好的做法，因为不再推荐使用该标签。也尝试与 CSS 一起工作，但又一次，我了解到（我对编码很陌生）任何 effects/moving 等都应该用 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 并添加条件以在溢出时重置 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>

有没有办法让图像gallery/carousel走到另一边？

Is there a way to make the image gallery/carousel go to the other side?

javascript

jquery

image-gallery