<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
'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 |