如何在与jQuery元素周期的单一格 [英] How to cycle a single div in an element with jQuery

问题描述

我想看看以下是可能的：

I am trying to see if the following is possible:

我希望能够周期元素中的单个分区连续[所以div的开始是由同一个分区，因为它的周期结束。]

I want to be able to cycle a single div within an element continuously [so the start of the div is by the end of the same div as it cycles.]

此不必是现有插件。我想preFER如果可能的话不能克隆股利。 div的宽度将通过JavaScript循环之前进行设置，但可能少量调整。

This doesn't have to be an existing plugin. I would prefer to not clone the div if possible. The div's width will be set via javascript prior to cycle but might be adjusted in small amounts.

我想AP preciate任何想法！

I would appreciate any ideas!

推荐答案

jQuery的：

$('.scroller').each(function(){
  $(this).find('img').clone().appendTo($(this));
});

(function move(){
  $('.scroller').scrollLeft(0).stop().animate({scrollLeft:310},800,'linear',move);
})();

HTML

  <div class="scroller">
    <img src="" alt="" />
  </div>

CSS：

.scroller{
  width:310px;
  height:80px;
  white-space:nowrap;
  word-spacing:-1em;
  overflow:hidden;
  margin:30px;
}
.scroller img{
  display:inline; 
}

这将使克隆只有一次。比我的jQuery的脚本将创建一个循环，只会用 scrollLeft（）元素属性发挥。

N.B：这只是一个简单的例子，你可以让 310px 进行动态计算，但这是另一个故事，让我们保持它的简单

N.B: this is just a plain example, you could make 310px be dynamically calculated, but that's another story, let's keep it simple.

这篇关于如何在与jQuery元素周期的单一格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！