2013-09-07 7 views
-1

나는이 사이트를 처음 사용하지만 이미지의 작은 모음에서 클릭하여 사진을 변경하는 아주 간단한 코드를 작성하려고합니다. "다음"은 이미지의 오른쪽에, "이전"은 왼쪽에 있습니다. 텍스트 아래에 공백을 포함시키고 이미지를 변경하는 독립적 인 텍스트 링크 옵션을 사용하는 것이 이상적입니다. 내가 찾는 내용을 설명하는 가장 좋은 방법은 정확히이 것과 동일한 것입니다. http://rowingprojects.com/cabinet/florian-roithmayr-the-y사진/이미지 변경, 다음 이미지의 앞면과 오른쪽면의 왼쪽면

아무도 도와 줄 수 있습니까? 나는 그것을 매우 감사 할 것이다. 고맙습니다.

+0

무엇을 시도 했습니까? 문제를 먼저 조사하고 시작할 수 있는지 확인하십시오. –

답변

0

HTML, CSS 및 자바 스크립트가 필요합니다.

HTML에서 : 슬라이드하려는 모든 이미지를 내려 놓고 ID를 지정하십시오. 스타일의 표시 속성을 사용하여 HTML 코드에서 모두 숨 깁니다. 항상 이미지 왼쪽과 오른쪽 위에있는 2 개의 투명한 블록을 추가해야합니다. CSS position, z-index, top 및 left 속성을 사용하여이 작업을 수행 할 수 있습니다. 이 요소에 onmouseclick 및 올바른 JS 함수 (nextimage, previousimage)를 지정하십시오.

JS : var에 배열의 실제 사진 번호가 포함되어 있어야합니다. 이미지 ID가있는 배열이 필요합니다. stimile의 표시 속성을 사용하여 이미지를 표시하거나 숨기는 nextimage 및 previousimage가 필요합니다. 이러한 배열 및 var를 사용합니다.

이미지의 제목이나 설명이 필요하면 이미지를 div에 넣고 원하는대로 형식을 지정하기 만하면됩니다. 그러나이 경우 이미지에 div가 아닌 div를 추가해야합니다. 또는 JS를 사용하여 제목/설명을 변경할 수 있습니다.