메뉴 건너뛰기

2016.09.21 18:24

슬라이드 쇼

조회 수 6611 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

예제 소스는 3장의 이미지가 겹쳐져 있는 상태에서 첫번째 이미지는 보이고 두번째, 세번째 이미지는 감추어진 상태로 시작한다. 

3초 단위로 switchImg() 함수가 호출된다. switchImg()함수는 이미지 목록의 첫번째 이미지를 감추고 목록의 뒤로 이동시키고 두번째 이미지를 화면에 표시한다. 


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<style>

*{

margin:0;padding:0;

}

.slideshow{

width:127px;

    height:129px;

    margin:0 0 0 0;

    float:left;

position:relative;

}

.slideshow img{

position:absolute;

    top:0;

    left:0;

    border:1px solid #000;

    margin:0 0 0 0;

    width:127px;

    height:129px;

}

.slideshow img.alt{

display:none;

}

</style>

<script>
$(function(){
    var interval = 3000;
$('.slideshow').each(function(){
var container = $(this);
function switchImg(){
var imgs = container.find('img');
var first = imgs.eq(0);
var second = imgs.eq(1);
first.fadeOut().appendTo(container);
second.fadeIn();
}
setInterval(switchImg, interval);
});
});
</script>
<body>
<div class="slideshow">
<img src="/1.png">
<img src="/2.png" class="alt">
<img src="/3.png" class="alt">
</div>
</body>


var interval = 3000;  

이미지가 교체되는 주기는 3초이다.


$('.slideshow').each(function(){  

}

클래스 속성값으로 slideshow 을 갖는 각각의 객체에 대해서 파라미터로 전달된 콜백함수를 수행한다. 샘플은 slideshow 클래스를 갖는 <div>가 하나이지만 여러개를 정의할 수도 있다.


var container = $(this);   

선택한 객체(DOM)를 jQuery 개체로 변환해서 변수 container 에 반환한다.


function switchImg(){

};

3초 단위로 호출되면서 보여지는 이미지를 교체하는 함수


var imgs = container.find('img');

container 객체에 포함된 객체 중에서 <img> 객체들을 찾아서 반환한다.


var first = imgs.eq(0);

<img> 객체중에서 첫번째 객체를 선택한다.


var second = imgs.eq(0);

<img> 객체중에서 두번째 객체를 선택한다.


first.fadeOut().appendTo(container);

첫번째 이미지를 감추고 이미지 목록의 마지막으로 이동시킨다.


second.fadeIn();

두번째 이미지를 표시한다.



function switchImg(){

var imgs = container.find('img');

var first = imgs.eq(0);

var second = imgs.eq(1);

first.fadeOut().appendTo(container);

second.fadeIn();

}



다음 이미지들은 소스가 동작하고 나서 3초 단위로 이미지들이 보여지는 모습 및 순서를 표현한 것이다.


첫번째   3초후   6초후


List of Articles
번호 제목 날짜 조회 수
179 jquery selector / jquery 선택자 / 자주 사용하는 jquery selector 선택자 / selecter 2016.09.09 8149
178 ajax 아작스 통신 2016.09.09 8040
177 강제 click 이벤트 발생 2016.09.09 7733
176 벨리데이션 체크 / validator / 자동 입력 제한 2016.09.09 7142
175 각종 다이어그램 플러그인 / 차트 / 관계 플러그인 2016.09.09 9478
174 jqGrid / custom pager / custom paging / 그리드 / 페이징 file 2016.09.09 12479
173 [jQuery Plugin] FCKeditor 2.6.5 사용법 2016.09.11 7179
172 jquery 이용한 이미지 변환 2016.09.11 7360
171 jquery function 생성 2016.09.11 6963
170 [jQuery] 이용 아이디 중복체크 실시간 2016.09.11 8874
169 jQuery Quick API file 2016.09.13 6933
168 이미지 클릭시 확대하기 file 2016.09.21 12639
167 Get방식 파라미터 전송 & 탭 메뉴 선택 2016.09.21 8565
166 간단한 세로 메뉴 file 2016.09.21 7305
165 Input TYPE=“File” 을 히든으로 하고 외부 버튼을 눌러서 파일을 선택 2016.09.21 6801
164 document.getElementById() 처럼 DOM 객체 얻기 2016.09.21 6810
163 select box 값 변경, 목록 변경 2016.09.21 9065
» 슬라이드 쇼 file 2016.09.21 6611
161 jQuery Cookie 2016.09.21 6864
160 체크박스 또는 라디오 버튼의 체크여부 변경하기 2016.09.21 6667
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved