이미지 슬라이더..

SOURCE 2011. 5. 3. 19:03

적용주소 : http://sangmuni.hosting.paran.com/0503/album.html

소스 :  위의링크에서 오른쪽버튼 소스보기~

만든이유 : 어떻게 하다보니 만들고 싶은 욕구가 생겨, 10시간정도 붙어서 겨우겨우 만들었음..

설명 : 이미지 파일들을 슬라이더 형식으로 움직여서 보여준다. 슬라이더 방향 바꾸기도 가능하다.

원리 : 이미지 파일이 많을경우 모든 파일을 불러온후 슬라이더를 표현할경우 컴에 부담이 되지 않을까 싶다. 그래서 이미지파일은 두개만 불러오며, 슬라이더의 진행방향에 element의 위치와 src를 자바스크립로 수정하여 하나의 사진이 넘어갈때마다 새로운 이미지파일을 불러오게 한다.  뭐.. 이런방법이 처음에 말한 부담되는 방법보다 더 부담이 되는지, 덜 부담이 되는지 테스트를 해보지는 않았다. 느낌상 그렇다는거다..

transNegative 함수의 용도 : 첫 사진에서 왼쪽으로 흘러가던 이미지를 오른쪽으로 흘러가게 했을때, 그 다음으로 나오는 이미지는 배열의 두번째 이미지가 아니라, 배열의 마지막 이미지여야 한다. 현재 자바스크립트에서 number 통해서 이미지의 src를 선택적으로 바꿔주는데, 음수일경우 알맞게 변경해주어 첫번째 이미지파일 이전에 마지막 파일을 보여준다.
만약 그냥 number % photos.length 처럼 나머지만(%) 구할경우, 방향이 어디로 흐르던 0,1,2, 이렇게 차례대로 출력된다.

lastDirection의 용도 : 마지막 진행 방향을 기억해 , 역으로 갈경우 number를 알맞게 처리해준다. 이것을 처리하지 않은채 진행 방향을 바꿀경우 같은 사진이 한장더 추가되어 화면에 나온다. 이런식의 처리방법말고 다른 방법이 있을거 같다.. 

number는 현재 보이는 사진의 number가 아니라, 현재 사진 다음에 나올 사진의  number이기 때문에 위에처럼 중복된 이미지가 나온.

수정해야할 사항들 : inline 형식으로 이벤트처리기를 작성했음. javascript에서 작성할것.
 xml과 연동되어 사용하기 쉽게 할것, 전역변수를 없앨것, 직관성이 떨어져보이지 않게 할것

'SOURCE' 카테고리의 다른 글

XML파일로 ROLLOVER하기  (0) 2011.05.07
Posted by sangmooni
,