20180807 / 디지텍 / 슬라이드 고도화

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* { margin:0; padding:0; }
		ul, li { list-style:none; }
		.slide { width:1200px;margin:20px auto;height:400px; position:relative;overflow:hidden;}
		.slide ul{height:400px;position:relative;}
		.slide li{height:400px;}
		.slide li:nth-child(1){background:#faa;}
		.slide li:nth-child(2){background:#afa;}
		.slide li:nth-child(3){background:#aaf;}
	</style>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
	<div class="slide" data-type="right2left" data-delay="1000" data-time="300">
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	<div class="slide" data-type="btm2top" data-delay="1500" data-time="500">
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	<div class="slide" data-type="fade" data-delay="2000" data-time="1000">
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
	<script type="text/javascript">
		function slide () {
			$('.slide').each( function (idx, target) {
				var obj      = $(target).find('ul')
				var len      = $(target).find('li').length
				var playTime = $(target).data('time')
				var delay    = $(target).data('delay')
				var type     = $(target).data('type')
				var pos      = 0
				var timer

				obj.find('li').eq(pos).addClass('active')
				obj.css('position', 'relative')

				if (type == 'right2left')
					obj.css({display:'flex', width:len*100+"%"}).find('li').css({width:100/len+"%"})
				else if(type == 'fade')
					obj.find('li').css({position:'absolute',left:0,top:0,width:'100%',height:'100%'}).not('.active').hide()

				function play () {
					clearTimeout(timer)
					pos = (pos + 1) % len
					switch (type) {
						case 'fade' :
							obj.find('li.active').removeClass('active').stop().fadeOut(playTime)
							obj.find('li').eq(pos).addClass('active').stop().fadeIn(playTime)
						break;
						case 'right2left' :
							obj.animate({
								marginLeft:-pos*100+'%'
							}, playTime)
						break;
						case 'btm2top' :
							obj.animate({
								top:-pos*100+'%'
							}, playTime)
						break;
					}
					timer = setTimeout(play, delay)
				}

				timer = setTimeout(play, delay)
			} )
		}
		$(slide)
</script>
</body>
</html>