Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/449.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何停止我的多项目引导转盘克隆?_Javascript_Css_Twitter Bootstrap_Carousel - Fatal编程技术网

Javascript 如何停止我的多项目引导转盘克隆?

Javascript 如何停止我的多项目引导转盘克隆?,javascript,css,twitter-bootstrap,carousel,Javascript,Css,Twitter Bootstrap,Carousel,我对网页设计还是相当陌生的——我一直在自学网页设计,通常能够在网上找到任何问题的解决方案,但是我遇到了一些我还没有足够的知识来解决的问题,而且似乎找不到满意的答案 我正在尝试使用引导创建一个循环的多项目旋转木马,并修改了我找到的代码以显示6个图像,而不是4个 我使用的html与上面的链接大致相同(我刚刚将单个图像的列大小修改为col-md-2 col-sm-6 col-xs-12)。我在网上发现了一些类似的问题,通过遵循这些问题,我将JS修改为: $('#myCarousel').carouse

我对网页设计还是相当陌生的——我一直在自学网页设计,通常能够在网上找到任何问题的解决方案,但是我遇到了一些我还没有足够的知识来解决的问题,而且似乎找不到满意的答案

我正在尝试使用引导创建一个循环的多项目旋转木马,并修改了我找到的代码以显示6个图像,而不是4个

我使用的html与上面的链接大致相同(我刚刚将单个图像的列大小修改为
col-md-2 col-sm-6 col-xs-12
)。我在网上发现了一些类似的问题,通过遵循这些问题,我将JS修改为:

$('#myCarousel').carousel({
 interval: 40000
});

// ARCHIVE CAROUSEL

$('.carousel[data-type="multi"] .item').each(function(){
 var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));


  for (var i=0;i<4;i++) {
    next=next.next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }

    next.children(':first-child').clone().appendTo($(this));
  }
});
旋转木马在我的浏览器预览中完全按照我希望的那样工作-有一个问题。整个旋转木马在页面上进行了4次自我克隆

我意识到这对我来说是一件新鲜事,这可能是一件非常明显和愚蠢的事情,但我真的很想知道我在这里犯了什么错误,如果有人能帮助我的话

非常感谢

Bootply预览(我现在只想获得桌面视图)

[为拼写/标点而编辑]

更改JS中的行:

for (var i=0;i<6;i++) {
for(var i=0;i更改JS中的行:

for (var i=0;i<6;i++) {

for(var i=0;i事实上,很高兴您考虑复制性能,即使您对web设计相当陌生。我建议您在定义旋转木马之前创建数组。数组将包含所有幻灯片jQuery对象:

var slides=[$('.slide-1'),$('.slide-2')];

用动态元素填充它,或者只定义现有的选择器。这将允许您重用jQuery对象,而不是创建新对象。您可以随意附加现有块

这里还有一点-您应该定义旋转木马中元素的限制,或者在每次迭代时从中删除看不见的幻灯片等。这将为您节省大量内存(即使您重复使用已经存在的对象,由于附加,您的容器也将扩展)


希望这有帮助。

即使您对网页设计还相当陌生,但考虑复制性能还是很好的。我建议您在定义旋转木马之前创建数组。数组将包含所有幻灯片jQuery对象:

var slides=[$('.slide-1'),$('.slide-2')];

用动态元素填充它,或者只定义现有的选择器。这将允许您重用jQuery对象,而不是创建新对象。您可以随意附加现有块

这里还有一点-您应该定义旋转木马中元素的限制,或者在每次迭代时从中删除看不见的幻灯片等。这将为您节省大量内存(即使您重复使用已经存在的对象,由于附加,您的容器也将扩展)


希望对您有所帮助。

看看这个示例,将项目附加到旋转木马的循环应该只运行两次


对于(var i=0;i来看这个示例,将项目附加到旋转木马的循环应该只运行两次


对于(var i=0;iThanks,我已经尝试过了,但是仍然存在相同的问题。恢复到原始JS文件并更改代码中的幻灯片数量。还要考虑@Appreiron说的话!谢谢,我已经尝试过了,但是仍然存在相同的问题。恢复到原始JS文件并更改代码中的幻灯片数量。还要考虑@Appreiron说的话!Thank you@Appeiron这听起来很有道理,我想我需要多读一点jQuery才能完全理解,但它给了我一些研究的东西。只要把DOM元素看作是对象就行了。不需要复制它们,只需反复插入它们,carousel就是它们的查询。干杯,我来试试,让你看看知道它是否有效!谢谢@Appeiron这听起来很有道理,我需要多读一点jQuery,我想我能完全理解,但它给了我一些研究的东西。只要把DOM元素当作对象来考虑就行了。不需要复制它们,你只需要反复插入它们,旋转木马就是对它们的查询。干杯,我要给你这个这是一个尝试,让你知道它是否有效!