innerfade 플러그인은 시각효과를 위한 플러그인입니다.
다운은 http://medienfreunde.com/lab/innferfade 에서 내려 받을수 있습니다.
innerfade 플러그인을 사용하려면 head 태그에 script를 추가해야합니다.
innerfade 메소드를 구현하면 쉽게 플러그인을 구현할 수 있습니다.
필요한 파라미터는 소스에 주석으로 작성했습니다.
소스코드
<!DOCTYPE html>
<html>
<head>
<style>
* {margin: 0px; padding: 0px;}
ul {list-style:none;}
img {width: 500px; height: 350px;}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="jquery.innerfade.js"></script>
<script>
$(document).ready(function (){
//innerfade 플러그인을 적용합니다.
//2초마다 그림을 변경하게 합니다.
//speed는 내용물의 변경속도
//timeout 변경 효과가 적용되는 속도
//type 내용물의 변경 방식
//containerheight 내용물의 높이
$('#inner-fade').innerfade({
animationtype: 'fade',
speed: 750,
timeout: 2000,
type: 'random',
containerheight: '350px'
});
});
</script>
</head>
<body>
<!--inner-fade 플러그인은 ul 태그에 적용하는 플러그인입니다. -->
<ul id="inner-fade">
<li><img src="pic1.jpg" /> </li>
<li><img src="pic2.jpg" /> </li>
<li><img src="pic3.jpg" /> </li>
<li><img src="pic4.jpg" /> </li>
<li><img src="pic5.jpg" /> </li>
<li><img src="pic6.jpg" /> </li>
<li><img src="pic7.jpg" /> </li>
<li><img src="pic8.jpg" /> </li>
</ul>
</body>
</html>
출력화면
아래와 같이 사진이 랜덤으로 바뀌게 됩니다. 이때 2초마다 변경이 됩니다.
'프로그래밍 > Jquery' 카테고리의 다른 글
| jquery - stop 메소드를 이용한 애니메이션 정지하기 (0) | 2014.10.27 |
|---|---|
| jquery - 애니메이션 큐 및 큐를 clear 하는 방법 (0) | 2014.10.27 |
| jquery - animate 메소드를 이용한 동적으로 스타일 변화시키기 (0) | 2014.10.27 |
| jquery - hover 메소드와 animate 메소드를 이용한 마우스 오버 애니메이션 효과 만들기 (0) | 2014.10.27 |
| jquery - toggle 메소드를 이용한 시각효과 만들기 (0) | 2014.10.20 |
| jquery - 입력양식 이벤트를 이용한 한번에 모든 체크박스를 체크하기 (2) | 2014.10.18 |
| jquery - window객체를 활용하며 무한 스크롤 구현하기 (0) | 2014.10.18 |
| jquery - keyup메소드를 이용한 글자수세기프로그램 만들기 (0) | 2014.10.11 |