자바 스크립트로 미리로드하지 않는 슬라이드 쇼를 만드는 방법은 무엇입니까?

이 같은 간단한 슬라이드 쇼를하고 싶습니다 :자바 스크립트로 미리로드하지 않는 슬라이드 쇼를 만드는 방법은 무엇입니까?

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

을 내가 요청할 수 있습니다, 자바 스크립트에 새로운 오전 위와 같이 슬라이드 쇼를 구축 할 수있는 예는 무엇입니까? 사용자가 이전/다음 버튼을 클릭 할 때만 그림이 서버 측에서로드됩니다.

그리고 스크립트를 빠르게 실행할 수있는 방법이 있습니까?

많은 감사.

출처

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

자바 스크립트로 미리로드하지 않는 슬라이드 쇼를 만드는 방법은 무엇입니까?

답변

관련 문제