如何通過javascript構建不預載幻燈片放映？

我想作一個簡單的幻燈片這樣的：如何通過javascript構建不預載幻燈片放映？

http://www.businessinsider.com/useful-apps-2013-8#quip-is-a-brand-new-mobile-word-processing-app-quip-is-made-by-facebooks-former-cto-the-app-makes-it-easy-to-create-documents-on-the-go-but-it-still-works-on-your-desktop-too-2

我是新來的JavaScript，請問有沒有什麼例子建立一個幻燈片像上面？看來只有當用戶點擊上一個/下一個按鈕時纔會從服務器端加載圖片。

並且有什麼方法可以加速我們的腳本嗎？

非常感謝。

來源

2013-08-12 user2673206

你能分享一下你試過的嗎？ – JNF

兩個最簡單的滑塊/畫廊插件是fancybox和flexislider。他們有很多教程和幫助在線使用這些。

來源

2013-08-12 07:30:51 otherDewi

感謝您的回覆。我之前檢查過他們。但他們做的是預載所有的圖像，一旦網站加載從我的例子中，實際上它似乎只有我們點擊按鈕加載圖像。我以爲我會幫助用戶體驗？再次感謝 – user2673206

這是我的代碼到目前爲止。

<html> 
<body> 
<div class="testing"> 
<a href="#previous" onclick="goPrevious('imgtest', 'titletest')"> Previous</a> 
<a href="#next" onclick="goNext('imgtest', 'titletest')"> Next</a> 
<br> 
<h1 id='titletest'>test</h1> 

<img id="imgtest" src="2.jpg"> 

</div> 
< 
<script> 
function goPrevious(id, id_title) 
{ 
img = document.getElementById(id); 
img.src = "1.jpg"; 

title = document.getElementById(id_title); 
title.innerHTML="test ok previous"; 
} 
</script> 

<script> 
function goNext(id, id_title) 
{ 
img = document.getElementById(id); 
img.src = "3.jpg"; 

title = document.getElementById(id_title); 
title.innerHTML="test ok next"; 
} 
</script> 

</body> 
</html>

它正在工作。如果我想用更多圖片做點什麼？

<script type="text/javascript"> 
var pictures = [ 
{'src':'1.jpg', 'title':'1 pic'}, 
{'src':'2.jpg', 'title':'2 pic'}, 
{'src':'3.jpg', 'title':'3 pic'}, 
{'src':'4.jpg', 'title':'4 pic'}, 
{'src':'5.jpg', 'title':'5 pic'}, 
] 
</script>

謝謝。

來源

2013-08-13 11:09:38 user2673206

如何通過javascript構建不預載幻燈片放映？

回答

相關問題