Question

我有一个div inside它有图片轮播，我想将它附加到另一个DIV outside。但是，我在新的outside上丢失了旋转木马。如何为附加的div启用轮播？

<div class="inside">
    <ul class="slider">
      <li>
        <img src="http://lorempixel.com/580/250/nature/1"> <!-- random image -->
      </li>
      <li>
        <img src="http://lorempixel.com/580/250/nature/2"> <!-- random image -->
      </li>
      <li>
        <img src="http://lorempixel.com/580/250/nature/3"> <!-- random image -->
      </li>
      <li>
        <img src="http://lorempixel.com/580/250/nature/4"> <!-- random image -->
      </li>
    </ul>
</div>

 <div class="outside">
          <!-- append content here -->
 </div>

的jQuery

var $inside = $('.inside');
$inside.hide();
var appendcontent = $inside.find('.slider').html();
$(appendcontent).appendTo($('.outside'));

// settings
var $slider = $('.slider'); // class or id of carousel slider
var $slide = 'li'; // could also use 'img' if you're not using a ul
var $transition_time = 1000; // 1 second
var $time_between_slides = 2000; // 4 seconds

function slides(){
  return $slider.find($slide);
}

slides().fadeOut();

// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);

// auto scroll 
$interval = setInterval(
    function(){
      var $i = $slider.find($slide + '.active').index();

      slides().eq($i).removeClass('active');
      slides().eq($i).fadeOut($transition_time);

      if (slides().length == $i + 1) $i = -1; // loop to start

      slides().eq($i + 1).fadeIn($transition_time);
      slides().eq($i + 1).addClass('active');
    }
    , $transition_time +  $time_between_slides 
);

如果删除

，它将正常工作

var $inside = $('.inside');
$inside.hide();
var appendcontent = $inside.find('.slider').html();
$(appendcontent).appendTo($('.outside'));

Answer 1

编辑：我再次检查了小提琴，你只是将“li”附加到新的div中。为了使其正常工作，您应该使用

$inside.find('.slider');

Answer 2

var appendcontent = $inside.find('.slider').html();

html()方法返回jQuery元素的innerHTML。在您的示例中，它是<li>个节点的列表。只需用以下内容替换该行：

var appendcontent = $inside.find('.slider');

Answer 3

您正在将滑块类内容添加到外部类中但是..您需要在外部div上添加内部内容，否则与滑块类相关的所有动画都将消失..

  var appendcontent = $inside.find('.slider').html();
  var html = $inside.html();
  $(html).appendTo($('.outside'));

滑块需要像这样选择

  var $slider = $('.outside .slider'); // class or id of carousel slider

DEMO

Answer 4

因为追加内容没有“滑块”类。你应该替换

行

$inside.find('.slider').html();

与

$inside.find('.slider').parent().html();

将html附加到另一个DIV后jQuery效果丢失，

4 个答案: