jquery 슬라이더,뉴스티커,메뉴효과(슬라이딩다운)

jquery 슬라이더.

http://slidesjs.com/

이미지슬라이더로 stepcarousel.js (http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm)

를 주로 사용하다가 새로 바꿔봄..

stepcarousel viewer 은 마지막 이미지에 도달했을시 첫이미지부터 보려면 다시 rewind 되는데반해

slidejs 는 계속 이어서 보기가 되는터라 사용하기가 딱적당했고

fadein효과도 가능한점. 그리고 소스코드가 더 간단해서 사용하기가 편함.

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

stepcarousel.

stepcarousel : http://apceiu.org/en/m411.php?pn=4&sn=1&sn2=1

stepcarousel + contentslider : http://pinetree.designpixel.or.kr/kr/m41.php?pn=4&sn=1

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

slide.js

slidejs : 슬라이드효과 http://island.rcsoft.co.kr/ (메인비쥬얼)

source 

<div id='main_visual' class="main_visual">

<img src="img/main_visual.png" />

<img src="img/main_visual.png" />

<img src="img/main_visual.png" />

<img src="img/main_visual.png" />

</div>

<script type="text/javascript" src="/js/jquery.slides.min.js"></script>

<script type="text/javascript">

<!--

$(document).ready(function() {

$('#main_visual').slidesjs({

width: 1000,

height: 488,

navigation: false,

effect:{

slide: {speed: 2000},

fade: {speed: 1000,crossfade: true}

},

play: {

/*effect: "fade", - 페이드효과*/

effect: "slide", /*슬라이드효과*/

active: false,

auto: true,

interval: 3000,

swap: false

}

});

});

//-->

</script>

#####################################################

뉴스티커 - 일정시간간격으로 항목체인지

http://island.rcsoft.co.kr/ 메인탑 뉴스티커및 메뉴롤오버효과

<style type="text/css">

.top_txt{height:55px;overflow:hidden;}

.gnbwrap ul.menu{width:100%;list-style:none;margin:10px 0 0 0;padding:0;}

.gnbwrap ul.menu li{float:left;width:100px;text-align:center;background:#dedede;border:1px solid #666;}

.subwrap {width:100%;float:left;height:208px; }

.subwrap ul {float:left;width:100px; padding:0; list-style:none;border:1px solid #000;}

.subwrap ul li {padding:10px 0 10px 0; }

.subwrap ul li.fir {}

.subwrap ul li.foldup {text-align:right; margin:200px 10px 0 0;}

</style>

<div class="top_txt">

<p class="text"> 시간을 잊게 하는 섬 <br/>대한민국의 대한민국의 국격(國格)을 높이는 아일랜드 리조트</p>

<p class="text"> 시간을 잊게 하는 섬2 <br/>대한민국의 대한민국의 국격(國格)을 높이는 아일랜드 리조트</p>

<p class="text"> 시간을 잊게 하는 섬3 <br/>대한민국의 대한민국의 국격(國格)을 높이는 아일랜드 리조트</p>

<p class="text"> 시간을 잊게 하는 섬4 <br/>대한민국의 대한민국의 국격(國格)을 높이는 아일랜드 리조트</p>

<p class="text"> 시간을 잊게 하는 섬5 <br/>대한민국의 대한민국의 국격(國格)을 높이는 아일랜드 리조트</p>

</div>

<div class="gnbwrap">

<ul class="menu">

<li><a href="#">대메뉴1</a></li>

<li><a href="#">대메뉴2</a></li>

<li><a href="#">대메뉴3</a></li>

<li><a href="#">대메뉴4</a></li>

<li><a href="#">대메뉴5</a></li>

<li><a href="#">대메뉴6</a></li>

<li><a href="#">대메뉴7</a></li>

<li><a href="#">대메뉴8</a></li>

</ul>

<div class="subwrap" id='submenu'>

<ul class="sub1" >

<li class="fir"><a href="#">서브메뉴1</a></li>

<li ><a href="#">서브메뉴2</a></li>

<li ><a href="#">서브메뉴3</a></li>

<li ><a href="#">서브메뉴4</a></li>

<li ><a href="#">서브메뉴5</a></li>

<li ><a href="#">서브메뉴6</a></li>

</ul>

<ul class="sub2" >

<li class="fir"><a href="#">서브메뉴1</a></li>

<li><a href="#">서브메뉴2</a></li>

<li><a href="#">서브메뉴3</a></li>

<li><a href="#">서브메뉴4</a></li>

<li><a href="#">서브메뉴5</a></li>

</ul>

<ul class="sub3" >

<li class="fir"><a href="#">서브메뉴1</a></li>

<li><a href="#">서브메뉴2</a></li>

<li><a href="#">서브메뉴3</a></li>

<li><a href="#">서브메뉴4</a></li>

<li><a href="#">서브메뉴5</a></li>

</ul>

<ul class="sub4" >

<li class="fir"><a href="#">서브메뉴1</a></li>

<li><a href="#">서브메뉴2</a></li>

<li><a href="#">서브메뉴3</a></li>

<li><a href="#">서브메뉴4</a></li>

<li><a href="#">서브메뉴5</a></li>

</ul>

<ul class="sub5" >

<li class="fir"><a href="#">서브메뉴1</a></li>

<li><a href="#">서브메뉴2</a></li>

<li><a href="#">서브메뉴3</a></li>

<li><a href="#">서브메뉴4</a></li>

<li><a href="#">서브메뉴5</a></li>

</ul>

<ul class="sub6" >

<li class="fir"><a href="#">서브메뉴1</a></li>

<li><a href="#">서브메뉴2</a></li>

<li><a href="#">서브메뉴3</a></li>

<li><a href="#">서브메뉴4</a></li>

<li><a href="#">서브메뉴5</a></li>

</ul>

<ul class="sub7" >

<li class="fir"><a href="#">서브메뉴1</a></li>

<li><a href="#">서브메뉴2</a></li>

<li><a href="#">서브메뉴3</a></li>

<li><a href="#">서브메뉴4</a></li>

<li><a href="#">서브메뉴5</a></li>

</ul>

<ul class="sub8" >

<li class="foldup"><a href='#'>&#9447;</a></li>

</ul>

</div>

</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script type="text/javascript">

<!--

$(document).ready(function() {

$('#submenu').hide(); //로딩후 서브메뉴숨김

$('.gnbwrap').mouseover(function() { //마우스오버시 슬라이딩다운

m_stat =  $('#submenu').css('display');

if(m_stat == 'none'){

$('#submenu').slideDown(500);

}

});

$('#submenu').click(function(){ // 메뉴클릭시닫힘

$('#submenu').slideUp(300);

})

/* 5초마다 한번씩 뉴스 다음라인껄루 슬라이딩*/

var newsticker = setInterval( function(){

$('.top_txt p:first').slideUp(700,function(){

$(this).appendTo($('.top_txt')).slideDown();

});

}, 5000);

});

//-->

</script>