• CSS
  • J볃교

CSS(KEYFRAMES)와 JQUERY를 이용한 fadeIn/Out 슬라이드

2018-12-05 310

설명

  • 카카오톡 링크

CSS(KEYFRAMES)와 JQUERY를 이용한 fadeIn/Out 슬라이드입니다.

소스실행 현황

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

<style>
	.test {width:100%; height:300px; overflow:hidden }
	.test ul {width:100%; height:100%; position:relative; overflow:hidden }
	.test ul li {position:absolute; left:0; top:0; width:100%; height:100%; background-size:cover; background-position:center center; transform: scale(1.1); display:none }
	.test ul li:first-child {display:block}
	.test ul li.on{animation: wow_effect 3s linear; z-index:1 }
	.test ul li.on2 {z-index:2}
	@KEYFRAMES wow_effect {
		0% {transform: scale(1);}
		100% {transform: scale(1.1);}
	}
</style>
<script type="text/javascript">
	$(document).ready(function() {
		var number = 0;
		var test_length = $(".test ul li").length - 1;
		var time = 3000;
		$(".test ul li").eq(number).addClass("on");
		setInterval(function() {
			number = number + 1;
			if(number > test_length) {
				number = 0;
			}
			$(".test ul li").eq(number).siblings().removeClass("on").fadeOut();
			$(".test ul li").eq(number).addClass("on").fadeIn();
		},time);
	});
</script>

<div class="test">
	<ul>
		<li style="background-image:url('/img/example_img.jpg')"></li>
		<li style="background-image:url('/img/example_img2.jpg')"></li>
	</ul>
</div>