несколько динамически созданных галерей слайдера jquery на одной странице

Question

Я пытаюсь создать страницу, на которой пользователь может добавлять галереи слайдера jquery на страницу одним нажатием кнопки.

У меня почти есть работа, но у меня проблемы с вращением изображений на дополнительных ползунах, когда их больше, чем один. и оригинальный slder прыгает и показывает только два изображения.

Я создал jsfiddle продемонстрировать http://jsfiddle.net/UUKP4/25/

дополнительные ползунки только круглые петли один раз, а затем остановить

любая помощь очень ценится.

код для скрипки

CSS:

#slideshow { 
     position:relative; 
     height:350px; 
    } 
    #slideshow IMG { 
     position:absolute; 
     top:0; 
     left:0; 
     z-index:8; 
     opacity:0.0; 
    } 
    #slideshow IMG.active { 
     z-index:10; 
     opacity:1.0; 
    } 
    #slideshow IMG.last-active { 
     z-index:9; 
    } 

JScript

var i; 
    var topplus=50; 
    function buildslider(i, id, content) { 

     id = id + i; 

     var newdiv = document.createElement('div'); 
     newdiv.setAttribute('id', id); 
     newdiv.style.position = "absolute"; 
     newdiv.style.top = +topplus + "px"; 
     newdiv.style.left = +topplus + "px"; 
     newdiv.style.display = 'inline-block'; 

     newdiv.style.width = '320px'; 
     newdiv.style.height = '270px'; 
     newdiv.innerHTML = content; 
     document.getElementById("content").appendChild(newdiv);    
     topplus=topplus+150; 

     function slideSwitch() { 
      var $active = $('#' + id + ' #slide_image.active'); 

      if ($active.length === 0) $active = $('#' + id + ' #slide_image:last'); 

      var $next = $active.next().length ? $active.next() : $('#' + id + ' #slide_image:first'); 

      $active.addClass('last-active'); 

      $next.css({ 
       opacity: 0.0 
      }) 
       .addClass('active') 
       .animate({ 
       opacity: 1.0 
      }, 1000, function() { 
       $active.removeClass('active last-active'); 
      }); 
     } 

     $(function() { 
      setInterval(slideSwitch, 3000); 
     }); 
     i++; 
    } 



    function addSlider() {  
     buildslider('i', 'draggable', '<div id="slideshow"><img id="slide_image" src="http://jonraasch.com/img/slideshow/mini-golf-ball.jpg" class="active" /><img id="slide_image" src="http://jonraasch.com/img/slideshow/jon-raasch.jpg" /><img id="slide_image" src="http://jonraasch.com/img/slideshow/ear-cleaning.jpg" /></div>'); 
    } 

HTML

<input type='button' value='add slider' id='addSlider' onclick='addSlider();'> 

Answer 1

пихты Первое, что в t: При работе с добавлением динамически созданных элементов неизвестных величин сделайте все возможное, чтобы просто использовать классы, а не идентификаторы, потому что они более податливы и использование одного и того же идентификатора на нескольких элементах недействительно. HTML, не делают это.

После переключения всех классов на классы я заметил, что новые слайд-шоу были абсолютно позиционированы, что также следует избегать при динамическом создании элементов неизвестного числа. В результате я вместо этого разместил контейнеры и использовал clear:both, чтобы убедиться, что они не перекрываются.

Первоначально я просто удалил большой кусок вашей функции buildslider, но в итоге я просто решил полностью удалить его, потому что вы можете делать то, что функция сделала в одной строке. Я также удалил контейнер div, который ничего не делал, но дал измерения, решив включить его в CSS.

Что касается изменений в самом jQuery, он был относительно прост, как только элементам были предоставлены соответствующие классы. Самые большие изменения заключались в том, что я переместил setInterval за пределы функции slideSwitch, чтобы предотвратить ее совпадение друг с другом, добавил параметр (родительский объект), чтобы разрешить запуск нескольких слайд-шоу из разных точек запуска/перехода, и выбрал в основном CSS transition: opacity 1s; с номером .css jQuery над jQuery's .animate для удобства производительности и удобства редактирования. Вместо того, чтобы идти к каждому .animate и изменения продолжительности анимации, вы можете просто изменить 1s перехода, и он будет применять его ко всем анимации

Как вы видели в грубой демонстрации я писал в комментариях, были был сбой в одном переходе, и первый слайд медленно загружался. Первая проблема была связана с некоторой совпадающей проблемой при переходе от последнего слайда к первому слайду и была решена путем изменения .animates на .css и добавления перехода CSS, как упоминалось ранее. Вторая проблема заключалась в том, что по умолчанию не был класс active, поэтому я просто добавил класс к первому img в добавленном HTML.Однако, это сделало его сразу же появляются, так что я добавил .animate только после того, как он прилагается, так что мне не придется беспокоиться о повторении setInterval

Вот полный код

/* HTML */ 
<input type='button' value='Add Slider' onclick='addSlider()'> 
<div id="content"></div> 

/* CSS */ 
#content { 
    overflow:hidden; 
} 
.slideshow { 
    float:left; 
    clear:both; 
    position:relative; 
    width:270px; 
    height:350px; 
} 
.slideshow img { 
    position:absolute; 
    width:320px; 
    height:270px; 
    top:0; 
    left:0; 
    z-index:8; 
    opacity:0.0; 
    transition: opacity 1s; 
} 
.slideshow img.active { 
    z-index:10; 
} 
.sdeshow img.last-active { 
    z-index:9; 
} 

/* Javascript/jQuery */ 
var i = 0;  
function slideSwitch($container) { 
    var $active = $container.find('.slide_image.active');  

    if ($active.length === 0) { $active = $container.find('.slide_image:last'); } 
    var $next = $active.next().length ? $active.next() : $container.find('.slide_image:first'); 

    $active.addClass('last-active').removeClass('active').css({ 
     opacity: 0 
    }); 

    $next.addClass('active') 
     .css({ 
     opacity: 1.0 
    }, function() { 
     $active.removeClass('last-active'); 
    }); 
} 

function addSlider() { 
    $('#content').append('<div class="slideshow"><img class="slide_image active" src="http://jonraasch.com/img/slideshow/mini-golf-ball.jpg" class="active" /><img class="slide_image" src="http://jonraasch.com/img/slideshow/jon-raasch.jpg" /><img class="slide_image" src="http://jonraasch.com/img/slideshow/ear-cleaning.jpg" /></div>'); 
    var $addedElem = $('.slideshow:eq(' + i + ')'); 
    $addedElem.find('.active').animate({ opacity: 1 }); 
    setInterval(function() { slideSwitch($addedElem) }, 3000); 
    i++; 
} 

Full demo here

Пожалуйста, дайте мне знать, если у вас есть вопросы по поводу моего кода.