有没有办法使图库/传送带转到另一侧？

Question

我正在尝试设置图片库/轮播（ https://www.dwuser.com/education/content/creating-a-jquery-image-scroller/ ），其中一行从右到左，下一行从左到右。 它应该看起来像一个newsticker（请参阅： 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并添加条件以在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>