자동 롤링 이미지

자바스크립트 지식이 없는 관계로 노가다 코딩 일 듯 하다.

비효율적이고, 주먹구구식이지만 어쩔 수 없다. 허허허

사내시스템 메인화면에서 배너형식으로 이미지 몇개를 돌게해서 직원들에게 보여주고 있다.

요약된 정보를 작은 이미지에서 보여주고 (실제 5초마다 바뀌는 이미지)

관심 있는 이미지를 클릭하면 큰 이미지로 그 내용을 상세하게 보여주는 .... 그런 형식이다.

이미지는 디자이너가 만드니까 신경 쓸게 아니다만,

1. 요약된 정보 이미지

2. 요약된 정보 이미지 클릭 시 큰 이미지를 새창에 띄워서 전체 내용 보여줌.

3. 큰 이미지, 그러니까 전체 내용이 있을 수도 있고, 없을 수도 있음.

3번이 좀 맘에 걸렸다.

1번부터 10번까지 이미지가 있다면, 1~5번은 큰 이미지가 없고 나머지는 있고 이런식도 아니였다.

1,2,5,8 큰 이미지 없음. 나머지 큰 이미지 있음. 뭐 이런식..

언제나 예외와 싸우는게 프로그래밍이라 하지만 짜증이 안날래야 안날 수가 없다.

그래서 만들었는데,,

다시 처음부터 만들라면 할 수 있을지 모르겠다.

완성도도 떨어지고.. 아무튼 그렇다. 허허헣~

대략적인 구조는

1. 파일이름이 제각각 일 수 있으니 폴더에 있는 이미지 파일이름을 먼저 배열에 넣는다.

2. 파일 이름앞에 '파일경로', 파일이름 뒤에 '확장자' 를 붙여서 이미지 주소를 완성 시킨다.

3. 큰 이미지를 가지는, 다시 말해 클릭 했을 때 크게 보여줄 이미지를 가지고 있는 파일이름을 특정 함수 파라미터에 넣는다.

3-1. 특정 함수에 파일이름이 적힌 이미지는 클릭 시 새창으로 큰 이미지 표시, 나머지는 표시안함.

4. setInterval() 과 setAttribute() 를 이용해서 이미지를 지정된 시간 만큼 보여주고 이미지 교체 (현재는 5초)

소스를 다 적긴 좀 거시기 하니까 첨부파일로 올려놔야겠다.

이미지는 사내에서 사용하는 이미지가 아닌, 사이즈만 같은, 동물 이미지로 교체.

이미지에 대해서 간략히 설명한다면

파일이름은 "00","01".. 이런식의 숫자로 돼있다.

어차피 파일이름을 배열에 직접 넣어주니까 추후에 수정이 가능하다.

작은 이미지를 클릭 했을때 띄워질 큰 이미지는 파일 이름은 같지만 뒤에 알파벳 "L" 을 붙였다. 라지의 첫글자.

이 부분 또한 맘대로 바꿀 수 있다. 소스랑 매칭만 시켜주면 뭐....... (예: 00.jpg, 00L.jpg, 01.jpg, 01L.jpg.....)

일단 올려보자.

틈틈히 소스를 보면서 수정도 하고 해야하는데

잘 돌아간다면 그냥 그런가 보다 하니까 잘 안봐진다. 에휴.. 맨날 그 밥에 그 나물..

Rolling.zip