bgSlideBanner.js

페이드인-아웃을 이용한 백그라운드 배너 플러그인

샘플영상

다운로드

bgSlideBanner.js V1.0 다운로드

설치/사용법

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/bgSlideBanner.js"></script>


<script>
$(function(){
    
    $('#main').bgSlideBanner({
        delay:5000,
        img:{1:'img1.jpg',2:'img2.jpg'}
    });


});
</script>


<section id="main" style="background:url('/img1.jpg') no-repeat center center; background-size: cover;">
    <h1>The Association of American State Offices In Korea</h1>
</section>

 

1. 제이쿼리 설치가 필요 합니다.

 

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/bgSlideBanner.js"></script>


<script>
$(function(){
    
    $('#main').bgSlideBanner({
        delay:5000,
        img:{1:'img1.jpg',2:'img2.jpg'}
    });


});
</script>


<section id="main" style="background:url('/img1.jpg') no-repeat center center; background-size: cover;">
    <h1>The Association of American State Offices In Korea</h1>
</section>

 

2. 다운로드 받은 플러그인을 설치 합니다.

 

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/bgSlideBanner.js"></script>


<script>
$(function(){
    
    $('#main').bgSlideBanner({
        delay:5000,
        img:{1:'img1.jpg',2:'img2.jpg'}
    });


});
</script>


<section id="main" style="background:url('/img1.jpg') no-repeat center center; background-size: cover;">
    <h1>The Association of American State Offices In Korea</h1>
</section>

 

3. 배너의 레이아웃을 작성 합니다.

 

 

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/js/bgSlideBanner.js"></script>


<script>
$(function(){
    
    $('#main').bgSlideBanner({
        delay:5000,
        img:{1:'img1.jpg',2:'img2.jpg'}
    });


});
</script>


<section id="main" style="background:url('/img1.jpg') no-repeat center center; background-size: cover;">
    <h1>The Association of American State Offices In Korea</h1>
</section>

 

4. 페이지가 열릴때 실행될 수 있도록 함수를 작성 합니다.

 

 

 

 

 

 $('#main').bgSlideBanner({
        delay:5000,  //이미지 변경 속도를 설정 합니다.
        img:{1:'img1.jpg',2:'img2.jpg'} // 배너 이미지를 설정 합니다.
  });

 

5. 배너 이미지 및 속도 옵션을 설정 합니다.

 

 

 

 

플러그인 설치/보수는 무료로 지원 하지 않습니다.
위로

잠시만 기다려주세요.