프로그래밍/Jquery

jquery - innerfade 플러그인을 이용한 사진 변경 효과 적용하기

가카리 2014. 10. 27. 20:03
반응형

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초마다 변경이 됩니다.





반응형