slidebanner.js

플러그인 사용을 위해선 도메인을 등록해야 합니다.
플러그인을 설치할 사이트의 도메인을 등록 후 사용법에 따라 이용해 주세요.

slidebanner.js

자동 또는 수동으로 동작 가능한 이미지슬라이드를 구현하게 해주는 플러그인

사용법

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//work6.kr/plugin/plugin_link/34"></script>

<style>
#banner1{width:900px; height:300px; overflow:hidden;}
#banner1 .page{top:5px; right:5px;}
#banner1 .arrowleft{top:150px; left:10px; color:#fff;}
#banner1 .arrowright{top:150px; right:10px; color:#fff;}
</style>


<script>

    $(function(){
        $('#banner1').slidebanner({
            page:true,
            arrow:{left:'◀',right:'▶'},
            auto:true,
            speed:3000,
            delay:3000,
            pagecolor:'#eeeeee',
            pageoncolor:'#3af939'
        });
    });

</script>


<div id="banner1">
    <div class="container">
        <div><a href="#"><!-- 배너이미지 --></a></div>
        <div><a href="#"><!-- 배너이미지 --></a></div>
        <div><a href="#"><!-- 배너이미지 --></a></div>
        <div><a href="#"><!-- 배너이미지 --></a></div>
    </div>
</div>

 

 

 

 

설치방법

 

1. Line1 : 제이쿼리를 설치 및 연결 합니다.


2. Line2 : 플러그인 사용하기 후 도메인을 등록 합니다. 코드를 복사 그리고 붙여넣기 합니다.


3. Line5 ~ 8 : 스타일을 복사 그리고 붙여넣기 합니다. 웹 사이트에 맞게 수정 합니다.


4. Line15 ~ 23 : 스크립트를 복사 그리고 붙여넣기 합니다.


5. Line29 ~ 36 : html을 복사 그리고 붙여넣기 합니다. 기본 형식 입니다.


6. Line16 : 페이사용 여부 입니다.


7. Line17 : 왼쪽, 오른쪽 이동 버튼 입니다.


8. Line18 : 자동 동작 여부 입니다.


9. Line19 : 배너 체인지 시간 입니다.


10. Line20 : 배너 멈추어 있는 시간 입니다.


11. Line21 : 페이지 전체 색을 결정 합니다.


12. Line22 : 현재 페이지 강조 컬러 입니다.

 

 
 
 
 
 
Install
 

1. Line1: Install and connect to Jquery.

 

2. Line2: Register the domain after using the plug-in. Copy and paste code.

 

3. Line 5 ~ 8: Copy and paste the style. Modify it to fit your website.

 

4. Line 15 ~ 23: Copy and paste the script.

 

5. Line 29 ~ 36: Copy and paste html. The default format.

 

6. Line 16: Whether or not to use the pay.

 

7. Line17: Left and right movement buttons.

 

8. Line 18: Automatic operation.

 

9. Line19: The banner change time.

 

10. Line20: The time when the banner is stopped.

 

11. Line21: Determines the color of the entire page.

 

12. Line 22: Current page highlight color.