tstore_screenshot1.zip
tstore_screenshot2.zip
tstore_screenshot1 : tstore에 있는 방식대로 처리, 속도가 느리고 이미지 하나씩 슬라이딩 됨
tstore_screenshot2 : tstore에 있는 방식을 개선하여 처리, 속도 및 이미지 맞춤 개선
출처 : http://www.tstore.co.kr
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<style>
.scnshot_wrap {
width:532px;
height:350px;
position:relative;
}
.scnshot_wrap .scnshot_outer {
width:530px;
border-left:1px solid #3a3a3a;
overflow:hidden;
}
.scnshot_wrap .scnshot_outer ul {
width:10000px;
margin:0;
padding:0;
}
.scnshot_wrap .scnshot_outer ul li {
float:left;
display:inline-block;
overflow:hidden;
}
.scnshot_wrap .scnshot_outer img {
width:220px;
height:350px;
border:0;
margin-right:5px;
}
.scnshot_wrap .scnshot_prev {
position:absolute;
top:145px;
left:0;
z-index:10;
display:none;
}
.scnshot_wrap .scnshot_next {
position:absolute;
top:145px;
right:0;
z-index:10;
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
(function ($) {
$.fn.extend({
thumbnailSlide : function(opt) {
var settings = {
speed : 400
}
$.extend(true, settings, opt);
var _this = $(this);
var _outer = _this.find('.scnshot_outer');
var _content = _outer.find('ul');
var _item = _content.find('li');
if(_item.length < 1) {
return false;
}
var _btnPrev = _this.find('.scnshot_prev');
var _btnNext = _this.find('.scnshot_next');
var pos = 0;
var outerWidth = _outer.width();
var itemWidth = _item.eq(0).width();
var contentWidth = itemWidth * _item.length;
_content.width(contentWidth);
if(contentWidth - 5 > outerWidth) {
_btnNext.show();
} else {
return false;
}
_outer.css({borderRight:'1px solid #3a3a3a'});
_btnPrev.on('click', function() {
if(pos == contentWidth - outerWidth - 5) {
pos -= 420;
} else {
pos -= itemWidth * 2;
}
if(pos < 0) {
pos = 0;
_btnPrev.hide();
}
_outer.stop().animate({
scrollLeft : pos
}, {
duration:settings.speed,
easing : 'easeOutExpo'
});
_btnNext.show();
});
_btnNext.on('click', function() {
if(pos == 0) {
pos += 420;
} else {
pos += itemWidth * 2;
}
if(pos + outerWidth > contentWidth) {
pos = contentWidth - outerWidth - 5;
_btnNext.hide();
}
_outer.stop().animate({
scrollLeft : pos
}, {
duration:settings.speed,
easing : 'easeOutExpo'
});
_btnPrev.show();
});
}
});
})(jQuery);
jQuery(function($) {
$('.scnshot_wrap').thumbnailSlide();
});
</script>
</head>
<body>
<div class="scnshot_wrap">
<a href="#" class="scnshot_prev">
<img src="images/btn_prev05.png" alt="이전" />
</a>
<div class="scnshot_outer">
<ul>
<li><img src="images/screenshot1.png" /></li>
<li><img src="images/screenshot2.png" /></li>
<li><img src="images/screenshot3.png" /></li>
<li><img src="images/screenshot4.png" /></li>
<li><img src="images/screenshot5.png" /></li>
<li><img src="images/screenshot1.png" /></li>
<li><img src="images/screenshot2.png" /></li>
<li><img src="images/screenshot3.png" /></li>
<li><img src="images/screenshot4.png" /></li>
<li><img src="images/screenshot5.png" /></li>
</ul>
</div>
<a href="#" class="scnshot_next">
<img src="images/btn_next05.png" alt="다음" />
</a>
</div>
</body>
</html>
|