<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" data-arrow="false" data-bullet="false">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="slide" data-type="btm2top" data-delay="1500" data-time="500" data-arrow="true" data-bullet="false">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="slide" data-type="fade" data-delay="2000" data-time="1000" data-arrow="true" data-bullet="true">
<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 arrow = $(target).data('arrow')
var bullet = $(target).data('bullet')
var pos = 0
var timer
obj.find('li').eq(pos).addClass('active')
obj.css('position', 'relative')
if (arrow) {
var arrowStyle = 'position:absolute; top:calc(50% - 25px); height:50px; display:block; line-height:50px;'
var arrowLeft = 'left:0;'
var arrowRight = 'right:0;'
$('<a href="#" class="arrow left">왼쪽</a>').attr('style', arrowStyle + arrowLeft).appendTo(target)
$('<a href="#" class="arrow right">오른쪽</a>').attr('style', arrowStyle + arrowRight).appendTo(target)
}
if (bullet) {
var wrapStyle = 'position:absolute; bottom:20px; left:0; right:0; text-align:center;'
var childStyle = 'width:20px; height:20px; background:#666; transition:0.5s; display:inline-block; margin:0 3px; border-radius:20px'
var bulletWrap = $('<div class="pos"></div>').attr('style', wrapStyle)
for (var i = 0; i < len; i++) {
var bulletChild = $('<a href="#"></a>').attr('style', childStyle)
if (i == 0) bulletChild.addClass('active').css('background', '#000')
bulletChild.appendTo(bulletWrap)
}
bulletWrap.appendTo(target)
}
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)
if (++pos >= len) pos = 0
else if (pos < 0) pos = len-1
$(target).find(".pos a.active").removeClass('active').css("background","#666")
$(target).find(".pos a").eq(pos).addClass('active').css("background","#000")
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.stop().animate({
marginLeft:-pos*100+'%'
}, playTime)
break;
case 'btm2top' :
obj.stop().animate({
top:-pos*100+'%'
}, playTime)
break;
}
timer = setTimeout(play, delay)
}
$(target).find('.arrow').on('click', function () {
if ($(this).hasClass('left')) pos -= 2
play()
return false
})
$(target).find('.pos a').on('click', function () {
pos = $(this).index() - 1
play()
return false
})
timer = setTimeout(play, delay)
} )
}
$(slide)
</script>
</body>
</html>