在一個頁面上動態創建多個jquery滑塊庫

Question

我想創建一個頁面，用戶可以通過單擊按鈕將jQuery滑塊庫添加到頁面上。

我已經接近它的工作，但在有多個附加滑塊時圖像旋轉出現問題。和原始的sl j跳躍，只顯示兩個圖像。

我創建了一個的jsfiddle證明http://jsfiddle.net/UUKP4/25/

附加滑塊僅環輪一次，然後停止

任何幫助，不勝感激。

#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

第一件事的冷杉：

的小提琴

CSS代碼t：當處理添加動態創建的未知數量元素時，儘量使用類而不是ID，因爲它們更具延展性，並且在多個元素上使用相同的ID是無效的HTML，不要這樣做。

將所有ID切換到類後，我注意到新的幻燈片顯示是絕對定位的，這也應該通過動態創建未知數的元素來避免。結果，我改爲將容器漂浮並使用clear:both以確保它們不重疊。

最初我剛剛刪除了你的buildslider函數的一大塊，但最終我只是選擇完全刪除它，因爲你可以在一行中完成函數的功能。我還刪除了一個沒有做任何事情，但提供了維度的容器div，而是選擇將其放入CSS中。

至於jQuery本身的變化，一旦元素被賦予適當的類，它就相對簡單了。最大的變化是，我移動了slideSwitch函數以外的setInterval以防止它互相重疊，添加了一個參數（父對象）以允許從不同的起始點/轉換點運行多個幻燈片，並且主要選擇基於CSS transition: opacity 1s;與jQuery的.css在jQuery的.animate爲了性能和易於編輯的原因。而不是去每個.animate和改變動畫的持續時間，你可以改變的過渡1s，它會應用到所有的動畫

的當您在粗糙的演示中，我貼在評論中看到，有在一次轉換中出現故障，第一張幻燈片載入速度緩慢。第一個問題是由於從上一張幻燈片到第一張幻燈片的過渡中的一些重疊問題，並通過將.animates更改爲.css並添加前面提到的CSS轉換來解決。第二個問題是由於默認情況下沒有active類，所以我只是將該類添加到附加HTML中的第一個img。然而，這使得它立即出現，所以我加了.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

如果您有任何關於我的代碼的問題，請讓我知道