• HTML
  • CSS
  • JS
  • J볃교

JS / JQUERY 로 만든 위아래로 움직이는 슬라이드 게시판(권장 게시줄은 3개 이상)

2018-11-12 424

설명

  • 카카오톡 링크

JS / JQUERY 로 만든 위아래로 움직이는 슬라이드 게시판(권장 게시줄은 3개 이상) 입니다.

한개일때는 움직이지 않고, 2개일때는 clone 을 사용하여 움직이게 해놓았고, 권장 게시글은 3개부터입니다 :D

소스실행 현황

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<style>
	.slide_box {display:inline-block; width:100%; height:40px; overflow:hidden}
	.slide_box .slide {display:inline-block; width:100%;} 
	.slide_box .slide li {display:inline-block; width:100%; height:40px; line-height:38px;}
	.slide_box .slide li a { display:inline-block; font-size:16px; font-weight:300; letter-spacing:-0.025em; color:#404040}
</style>
<div class="slide_box">
	<ul class="slide">
		<li><a href="javascript:;">첫번째글</a></li>
		<li><a href="javascript:;">두번째글</a></li>
		
	</ul>
</div>
<div class="button_box">
	<button class="prevbtn">이전으로</button>
	<button class="nextbtn">다음으로</button>
</div>

<script type="text/javascript">
	clearInterval(slide); // play Retrun 으로 인하여 넣어논 소스입니다
	var slide;
	var new_total = $(".slide > li").length;
	var new_height = $(".slide > li").height();
	if( new_total != 1) { // 게시글이 한개가 아닐때
		if( new_total == 2) { // 게시글이 두개일때
			$(".slide > li").eq(1).clone().insertBefore($(".slide > li").eq(1));
			$(".slide > li").eq(0).clone().insertAfter($(".slide > li").eq(new_total - 1));
			new_total = $(".slide > li").length;
		}
		$(".slide > li").eq(new_total - 1).insertBefore($(".slide > li").eq(0)).parent().css({"margin-top":"-"+new_height+"px"});
	}
	

	function slide_start() {
		if( new_total != 1) { // 게시글이 한개가 아닐때
			slide = setInterval(animation,3000); // 움직이는 시간 1000 = 1초
		}
	}

	slide_start();

	$('.slide').hover(function(){
		clearInterval(slide);
	},function() {
		slide_start();
	});
	$('.nextbtn').click(function(){
		animation();
	});
	$('.prevbtn').click(function(){
		if( new_total != 1) { // 게시글이 한개가 아닐때
			clearInterval(slide);
			$('.slide').animate( {marginTop: '0px'}, 400, function() {
				$(this).css({"margin-top":"-"+new_height+"px"}); 
				$(".slide > li").eq(new_total - 1).insertBefore($(".slide > li").eq(0));;
			});
			slide_start();
		}
	});
	function animation(){
		if( new_total != 1) { // 게시글이 한개가 아닐때
			clearInterval(slide);
			$('.slide').animate( {marginTop: "-"+new_height*2+"px"}, 400, function() {
				$(".slide > li").eq(0).insertAfter($(".slide > li").eq(new_total - 1))
				$(this).css({"margin-top":"-"+new_height+"px"});
			});
			slide_start();
		}
	}
</script>