javascript - 水平循环轮播 javascript/jquery

Question

我想知道是否有人可以帮我为这个轮播编写一个循环？目前，旋转木马每 3 秒向右滚动一次，然后滚动回左侧并自行重置，我只是希望它能够无限循环，这样看起来更干净，有人能给我指出正确的方向或帮助我吗？我知道它更简单，但我不是一个 js 开发人员! (这是针对 google 站点 html 框的，否则我会使用 jquery 插件)

<style>
 .carousel {
  width: 1080px;
  height: 220px;
  position: relative;
  overflow: hidden;
  background-color:white;
  margin-bottom: 20px;
  margin-top: 20px;
  margin-left: 70px;
 }
 .items {
  width: 1080px;
  position: absolute;
 }
 .items > div {
  font-size: 20px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
 }
 .items > div > img {
  padding: 10px;
 }
 .nav {
  position: absolute;
  bottom: 5px;
  right: 15px;
 }
 .button {
  cursor: pointer;
  font-weight: bold;
  color: #fff;
 }
</style>
<div class="carousel" style="display:none;">
 <div class="items">
  <div>
    <img src="http://i59.tinypic.com/etisye.png" border="0" alt="Alkamai Logo">
  </div>

  <div>
   <img src="http://i59.tinypic.com/ouukxu.png" border="0" alt="AWS Logo">
  </div>
  <div>
    <img src="http://i61.tinypic.com/16k3t43.png" border="0" alt="cover-it-live">
  </div>
  <div>
    <img src="http://i60.tinypic.com/23wljxh.png" border="0" alt="escenic">
  </div>

  <div>
    <img src="http://i58.tinypic.com/sbiqu1.png" border="0" alt="Livefire">
  </div>
  <div>
    <img src="http://i58.tinypic.com/do9wep.jpg" border="0" alt="ooyala">
  </div>
  <div>
    <img src="http://i61.tinypic.com/24werue.png" border="0" alt="varnish">
  </div>
  <div>
    <img src="http://i60.tinypic.com/2ij14rd.png" border="0" alt="wordpress">
  </div>
 </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script>
<script>
 var current_slide = 0; // zero-based
 var slide_count = 4;
 var slide_size = 1080;

 var Direction = {
  LEFT: -1,
  RIGHT: 1
 };

 /**
 * Moves to the next slide using the direction (dx) parameter.
 */
 var nextSlide = function(dx) {
  current_slide = (current_slide + slide_count + dx) % slide_count;

  // Calculate the new value for css 'left' property and animate.
  var left_offset = '-' + (current_slide * slide_size) + 'px';
  $('.items').animate({'left': left_offset}, 1080);
 };

 $('.carousel').show();

 setInterval(function(){
    nextSlide(Direction.RIGHT);
  }, 3000);
</script>

Answer 1

对当前脚本稍加修改就可以使其不断前进。

变化是:

1. current_slide 始终为 1(以便始终仅向前移动)
2. 当我们向左移动 .items X 像素时，我们会将相应数量的项目移动到末尾(宽度适合 X 像素的数量)

更新的演示:http://jsfiddle.net/techfoobar/dWy9R/4/

代码:

var parent = $('.items');

var nextSlide = function (dx) {

    // NOTE: always move forward only
    current_slide = 1; //(current_slide + slide_count + dx) % slide_count;

    // Calculate the new value for css 'left' property and animate.
    var ileft_offset = current_slide * slide_size,
        left_offset = '-' + ileft_offset + 'px',
        iWidth = 0;

    parent.animate({
        'left': left_offset
    }, 'slow', function() { // called when animation is done
        iWidth = parent.find('> div:first').width();
        while(ileft_offset > iWidth) {
            parent.find('> div:first').appendTo(parent);
            ileft_offset -= iWidth;
            parent.css('left', '-' + ileft_offset + 'px');
        }
    });
};

<小时/>

修改后的版本，中间不会暂停。继续。

演示:http://jsfiddle.net/techfoobar/dWy9R/5/

var nextSlide = function () {
    parent.animate({
        'left': '-' + slide_size + 'px'
    }, 4000, 'linear', function() { // called when animation is done
        var ileft_offset = slide_size,
            iWidth = parent.find('> div:first').width();
        while(ileft_offset > iWidth) {
            parent.find('> div:first').appendTo(parent);
            ileft_offset -= iWidth;
            parent.css('left', '-' + ileft_offset + 'px');
            iWidth = parent.find('> div:first').width();
        }
        nextSlide();
    });
};

nextSlide(); // start it off!