본문 바로가기

Java Programming/JQuery

배경화면 이미지, 글자 자동 페이드 효과 변환(background image auto fade change)

<HTML>

 

//배경 이미지

<div id = "slideshow">
    <img class="active" src="images/asakusa2.jpg" alt="Slideshow Image 1" /> 
    <img src="images/GermanyTown.jpg" alt="Slideshow Image 2" /> 
    <img src="images/HinanResort.jpg" alt="Slideshow Image 3" /> 
    <img src="images/tongyoung.jpg" alt="Slideshow Image 4" /> 
    <img src="images/GermanyTown.jpg" alt="Slideshow Image 5" />
</div>

 

//변환할 글자

<div id="show_main">
    <div class="top-wrapper">
        <div id="base">
            <div id = indexFont>


                <div class = "mainFont">
                    <ul class="bg_content">
                        <li>${error}</li>
                        <li>AMAZING TOKYO</li>
                        <li>THE BEST VACATION SPOT</li>
                    </ul>
                    <ul class="bg_city-inf hor-list">
                        <li><img src="images/japan.png" alt="JAPAN" /></li>
                        <li>TOKYO, Sunny 21℃ <br /> 1200/100jp
                        </li>      
                    </ul>
                </div>

 

          <div>
              <ul class="bg_content">
                  <li>${error}</li>
                  <li>AMAZING SEOUL</li>
                  <li>THE BEST VACATION SPOT</li>
              </ul>
              <ul class="bg_city-inf hor-list">
                  <li><img src="images/korea1.png" alt="JAPAN" /></li>
                  <li>SEOUL, Sunny 22℃<br /> 1200/100jp
                  </li>      
              </ul>
          </div>
     
          <div>
              <ul class="bg_content">
                  <li>${error}</li>
                  <li>AMAZING PRAHA</li>
                  <li>THE BEST VACATION SPOT</li>
              </ul>
              <ul class="bg_city-inf hor-list">
                  <li><img src="images/korea2.png" alt="JAPAN" /></li>
                  <li>PRAHA, Sunny 23℃<br /> 1200/100jp
                  </li>      
              </ul>
          </div>
     
          <div>
              <ul class="bg_content">
                  <li>${error}</li>
                  <li>AMAZING BUSAN</li>
                  <li>THE BEST VACATION SPOT</li>
              </ul>
              <ul class="bg_city-inf hor-list">
                  <li><img src="images/korea3.png" alt="JAPAN" /></li>
                  <li>BUSAN, Sunny 24℃<br /> 1200/100jp
                   </li>      
              </ul>
         </div>
     
         <div>
             <ul class="bg_content">
                 <li>${error}</li>
                 <li>AMAZING BALAN</li>
                 <li>THE BEST VACATION SPOT</li>
             </ul>
             <ul class="bg_city-inf hor-list">
                 <li><img src="images/korea4.png" alt="JAPAN" /></li>
                 <li>BALAN, Sunny 25℃<br /> 1200/100jp
                 </li>      
             </ul>
         </div>


    </div> 
 </div>
 <h2>
     <a href="#">Plan Start</a>
 </h2>

   </div>

</div>

 

---------------------------------------------------------------------------------------

 

<css>

 

@import url("reset.css");

/* -------ㅡmain화면----------- */
#slideshow {
    position:relative;
    /* height:350px; */
    z-index:-11;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:-5;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:-1;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:-3;
}

#slideshow img {
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
}

/* -------ㅡmain화면 글자--------- */

#indexFont{
 z-index:-1;
}

#indexFont div {
    position: absolute;
    z-index:8;
    opacity:0.0;
    visibility: hidden;
}

#indexFont div.mainFont {
    z-index:10;
  opacity:1.0;
    visibility: visible;
    position: relative;
}

#indexFont li.last-mainFont {
    z-index:9;
}

 

---------------------------------------------------------------------------------------

 

<Jquery>

 

//배경 이미지

function slideSwitchImg() { 
     var active = $('#slideshow IMG.active');
    /*  if(active.length==0)
     active = $('#slideshow IMG:last');  */
    var next = active.next().length ? active.next() : $('#slideshow IMG:first');
    active.addClass('last-active');
    next.css({opacity: 0.0})
       .addClass('active')
       .animate({opacity: 1.0}, 1000, function() {
           active.removeClass('active last-active');
       });
 }
//변환할 글자
function slideSwitchFont() {
 var mainFont = $('#indexFont div.mainFont');
 var next = mainFont.next().length ? mainFont.next() : $('#indexFont div:first');
 mainFont.addClass('last-mainFont');
    next.css({opacity: 0.0})
     .addClass('mainFont')
     .animate({opacity: 1.0}, 0, function() {
      mainFont.removeClass('mainFont last-mainFont');
    });
}


$(function() {
    setInterval( "slideSwitchImg()", 5000 );

});
$(function() {
    setInterval( "slideSwitchFont()", 5000 );

});

 

 

<첨부파일>

index.jsp   

mainMenu.js

main.css

layout.css 

reset.css

 

 

'Java Programming > JQuery' 카테고리의 다른 글

[JQuery] Serialize()  (0) 2014.02.26
[JQuery] slideToggle()  (0) 2014.02.26
[JQuery] toggle()  (0) 2014.02.26
[JQuery] hide() / show()  (0) 2014.02.26
[JQuery] focus() / blur()  (0) 2014.02.26