製作幻燈片旋轉

我在與一個HTML5/jQuery的幻燈片系統概念麻煩......製作幻燈片旋轉

我想要的圖像不斷旋轉，無需停止。我現在設置的方式是在幻燈片用完時將左側的餘量更改爲0，然後轉到第一張圖像。我寧願讓它無限期地繼續下去。

雖然我在它...有沒有辦法從樣式表中讀取屬性？如果我可以讓用戶將腳本指向樣式表並從中拉出尺寸和內容，那會更好。

腳本（主要集中在CSS的版本，我可以將其轉換爲jQuery的版本，一旦我知道如何做到這一點）：

// JavaScript Document 
var slides = 4; // number of slides 
var time = 3; // time per slide (in seconds) 
var width = 600; // width of slideshow (ex: 600) 
var transition = .5 // transition time (in seconds) (for older browsers only, edit css for newer) 
window.onload = function start() { 
    if(Modernizr.csstransitions) { 
     cssslide(); 
    } else { 
     jqueryslide(); 
    } 
} 
function cssslide() { 
    document.getElementById("container").style.width=(width * slides) + "px"; 
    var num = 0; 
    setInterval(function() { 
     num = (num + 1) % slides; 
     document.getElementById('container').style.marginLeft = (("-" + width) * num) + "px"; 
    }, time * 1000); 
} 
function jqueryslide() { 
    $("#container").width((width * slides) + 'px'); 
    var num = 0; 
    setInterval(function() { 
     num = (num + 1) % slides; 
     $("#container").animate({marginLeft: (("-" + width) * num) + "px"},{duration: (transition * 1000)}); 
    }, time * 1000); 
}

編輯：爲了澄清，我不希望它不斷滾動，我希望它滾動，停止幾秒鐘，滾動，停止，滾動，停止像這樣，但不是一直縮回到第一個圖像，我只是想要它繼續。

來源

2012-02-10 JacobTheDev

已經有很多「無限」旋轉木馬了。任何理由重新發明車輪？ – j08691 2012-02-10 21:09:40

我想要一個漂亮易用的HTML5版本。另外，我之前建立了這個，我只想完成它大聲笑... – JacobTheDev 2012-02-10 21:11:58

啊，忘了我發佈了，我猜。無論如何，它不是每個人都回答得很好 – JacobTheDev 2012-02-17 19:18:47

當你的幻燈片初始化，使用JS來複制你的第一個圖像，這樣的標記看起來像這樣：

<div id="container"> 
    <img src="setup/slides/portal2.jpg" /> 
    <img src="setup/slides/crysis2.jpg" /> 
    <img src="setup/slides/deadspace2.jpg" /> 
    <img src="setup/slides/acb.jpg" /> 
    <img src="setup/slides/portal2.jpg" /> 
</div>

然後，一旦5日幻燈片（幻燈片1的副本）是可見的，明確的時間間隔，復位您的保證金爲0並重新初始化您的幻燈片。

來源

2012-02-10 21:38:43

啊，有趣的想法。唯一的問題，我想我會跑到是它仍然會轉換，因爲我使用CSS3作爲主要動畫。我不認爲你可以在CSS3元素上使用'jQuery.css（）'，因爲它們中的很多仍然使用供應商前綴。我想我可以在每次有人完成循環時複製整個圖像集，如果我能想出來...... – JacobTheDev 2012-02-10 21:43:32

我會認真反思你的方法。只是將更多的DOM元素加入無窮大是非常低效的，並且可能會成爲無障礙的噩夢。

我建議你看看jQuery Cycle plugin - 這很容易實現，並允許你無限循環。

來源

2012-02-17 18:05:07 chipcullen

系統的要點是使用CSS3轉換，所以使用jQuery Cycle似乎不適合我在找什麼。 – JacobTheDev 2012-02-17 19:18:08

製作幻燈片旋轉

回答

相關問題