當在同一頁面上重複使用時，自定義功能「休息」

我想我可以製作我自己的動態幻燈片腳本。當在同一頁面上重複使用時，自定義功能「休息」

function slider(container) 
{ 
    var time = 1200; 
    var width = 1000; 
    var container = document.getElementById(container); 
    var name = container.childNodes[1].className; 
    var content = document.getElementsByClassName(name); 

    var num = (content.length * width); 

    next = function() 
    {   
     var px = container.style.marginLeft; 
     var diff = Math.abs(px.replace('px', '')); 
     var shifted = (diff) ? (diff/width) : '0'; 

     shifted++; 

     if (shifted == content.length) 
     { 
      shifted = 0; 

      shift(); 
     } 

     container.style.marginLeft = (shifted == content.length) ? '0' : '-' + (shifted * width) + 'px'; 
    } 

    shift = function() 
    { 
     for (var i = 0; i < content.length; i++) 
     { 
      var delay = ((i + 1) * time); 

      setTimeout(next, delay); 
     } 
    } 

    container.style.width = num + 'px'; 

    shift(); 
}

適用於所有其他幻燈片放映容器。滑動總是由內部功能

函數next（）的

這個函數確定什麼滑動是下一個，並且當滑動是在末端使用其它內部功能

重置它們改變

函數偏移（）

它使用用於不同DIV不同瓦爾包含的可互換但是當我嘗試運行多個實例時，如下所示

slider（'element'）; slider（'element2'）;

起初，它運行代碼並遍歷所有元素的幻燈片，但只有FIRST實例會正確重置並繼續從開始到結束「滑動」，一遍又一遍。在重複實例是shift（）'d之後，所需的next（）不會被重複調用。

完全在主類之外移動滑塊（）並從頁面調用它是相同的結果。

小提琴，因爲它可能是一個單行修補程序。

http://jsfiddle.net/6LeUR/

來源

2013-04-28 John Smith

歡迎來到Stack Overflow。你將需要顯示你的實際代碼 - 如果沒有看到它，我們就不能分辨出什麼是錯的。（在[jsfiddle.net]（http://jsfiddle.net）提供演示程序絕不會感到痛苦。） – nnnnnn 2013-04-28 21:22:12

謝謝！我已經顯示了使用的代碼。編輯：非常整潔有用的網站。 – 2013-04-29 00:29:57

var content = document.getElementsByClassName(name);

＆hellip;會發現整個頁面與該類的所有元素，不能簡單地認爲滑塊內。嘗試將其更改爲：

var content = container.getElementsByClassName(name);

此外，next =和shift =前添加var。 Try it.

來源

2013-04-29 00:30:27 icktoofay

非常感謝，我喜歡以爲我會在下次看到。繼續教學，我們永遠不會學習。 – 2013-04-29 00:41:08

當在同一頁面上重複使用時，自定義功能「休息」

回答

相關問題