<h1 class="hidden">images Slider</h1>
<div id="bodyWrap" class="e1_slider">
<div class="header title_bar">
<div class="left a">
<img src="http://school.littlefox.co.kr/contents/apps/recorder/images/logo.png" alt="logo">
<span id="la_title" class="ttl">Slider 1</span>
</div>
<p class="right b" id="ls_title">images Slider</p>
</div>
<div class="type_tab">
<a href="#" class="on" data-type="type_y">세로형</a><a href="#" data-type="type_x">가로형</a>
</div>
<!-- stpe -->
<div id="step" class="wrap" style="display:block;">
<div class="container contents_body">
<!-- view_area -->
<div class="view_area">
<div class="img_slider_wrap type_y"><!-- 세로형 type_y, 가로형type_x -->
<h2 class="img_slider_title">Think about places around the world that are famous for movies.</h2>
<div id="imgSlider" class="img_slider_cont">
<div class="img_view">
<img src="img/img_a.jpg" alt="">
</div>
<div class="img_list_cont">
<div class="btn_slider">
<a href="#" class="prev"><span class="hidden">Before</span></a>
<a href="#" class="next"><span class="hidden">Next</span></a>
</div>
<div class="inner">
<ul class="img_list" style="top:-14px;">
<li class="on"><a href="#"><img src="img/img_a.jpg" alt="Test 1"></a></li>
<li><a href="#"><img src="img/img_b.jpg" alt="Test 2"></a></li>
<li><a href="#"><img src="img/img_c.jpg" alt="Test 3"></a></li>
<li><a href="#"><img src="img/img_d.jpg" alt="Test 4"></a></li>
<li><a href="#"><img src="img/img_a.jpg" alt="Test 5"></a></li>
<li><a href="#"><img src="img/img_b.jpg" alt="Test 6"></a></li>
<li><a href="#"><img src="img/img_c.jpg" alt="Test 7"></a></li>
<li><a href="#"><img src="img/img_d.jpg" alt="Test 8"></a></li>
<li><a href="#"><img src="img/img_d.jpg" alt="Test 9"></a></li>
</ul>
</div>
</div>
</div>
<!-- //#imgSlider -->
</div>
<!-- //.img_slider_wrap -->
</div>
<!-- //.view_area -->
</div><!-- //.container.contents_body -->
</div><!-- //step: image slide -->
</div>
<!-- JS -->
<script type="text/javascript">
SlidePlay = (function(){
//images sliders
$SlideWrap = $(".img_slider_wrap");
$SlideBox = $SlideWrap.find(".img_list_cont");
$SlideList = $SlideBox.find(".img_list");
$SlideView = $SlideList.find("li a");
$SlideLength = $SlideList.find("li").length;
$SlideXYSize = 0;
$SlideXYList = 0;
$SlideClick = 1;
$SlideP = 1;
//images slider
function SliderStyle(){
if($SlideWrap.hasClass("type_y")) { //type_y
var $SlideY_height = $SlideList.find("li").outerHeight();
var $SlideYSize = $SlideLength * $SlideY_height;
$SlideList.css({"top" : "-14px", "left" : "0", "width" : "100%", "height" : $SlideYSize});
}else if($SlideWrap.hasClass("type_x")) { //type_x
var $SlideX_width = $SlideList.find("li").outerWidth();
var $SlideXSize = $SlideLength * $SlideX_width;
$SlideList.css({"top" : "0", "left" : "-14px", "width" : $SlideXSize, "height" : "100%"});
}
}
//image Text Load
function SliderTextLoad($target){
$SlideWrap.find(".img_view img").prop("src", $target.prop('src'));
$SlideWrap.find(".img_slider_title").text($target.prop('alt'));
$SlideView.parent("li").addClass("on").siblings().removeClass("on");
}
//SliderMove
function SliderMove($SlideBtn){
if($SlideWrap.hasClass("type_y")){
$SlideList.stop().animate({
top: $SlideBtn == "prev" ? "+="+($SlideXYSize+14) : "-="+($SlideXYSize+14)
},1000);
} else if($SlideWrap.hasClass("type_x")){
$SlideList.stop().animate({
left: $SlideBtn == "prev" ? "+="+($SlideXYSize) : "-="+($SlideXYSize)
},1000);
}
$SlideList.removeClass("slider_next slider_prev");
setTimeout(function() {$SlideList.addClass("slider_next");},1);
}
//images Slider control paging button
function SliderPage($SlideBtn){
if($SlideWrap.hasClass("type_y")){
$SlideXYSize = $SlideBox.outerHeight();
$SlideXYList = $SlideList.outerHeight();
} else if($SlideWrap.hasClass("type_x")){
$SlideXYSize = $SlideBox.outerWidth();
$SlideXYList = $SlideList.outerWidth();
}
$SlideP = Math.ceil($SlideXYList/$SlideXYSize);
if($SlideBtn == "prev"){
$SlideClick --;
if($SlideClick < 1){
alert("이미지가 없습니다");
return $SlideClick = 1;
}
} else if($SlideBtn == "next"){
$SlideClick ++;
if($SlideClick > $SlideP){
alert("다음 이미지가 없습니다");
return $SlideClick = $SlideP;
}
}
SliderMove($SlideBtn);
}
return {
SliderStyle : SliderStyle,
SliderTextLoad : SliderTextLoad,
SliderPage : SliderPage
};
}());//SlidePlay
$(document).ready(function(){
//init
SlidePlay.SliderStyle();
$SlideView.on("click", function(){
SlidePlay.SliderTextLoad($(this).find('img'));
});
$(".btn_slider a").on("click", function(){
$SlideBtn = $(this).hasClass('next') ? 'next' : 'prev';
SlidePlay.SliderPage($SlideBtn);
});
//Tab
$(".type_tab a").on("click", function(){
var data_type = $(this).attr("data-type");
if(!$SlideWrap.hasClass(data_type)){
$(this).addClass("on").siblings().removeClass("on");
$SlideWrap.toggleClass("type_x type_y");
$SlideClick = 1;
SlidePlay.SliderStyle();
}
});
});
</script>