<!DOCTYPE html>
<html>
<head>
<title>현장 사진</title>
<style>
div.roadPic {align:center;position: relative;margin-bottom:20px;width: 820px;overflow: hidden;height: 180px;}
div.roadPic ul {position: absolute;margin: 0;padding: 0;top: 0;left: 0;}
div.roadPic ul li {position: absolute;width: 176px;}
div.roadPic ul li img {width: 180px;height:180px;cursor:pointer;}
#bigPic{padding:20px 0 20px 0;height:440px;text-align:center;border:1px solid #2a495b;}
#bigPic img{height:440px;cursor:pointer}
</style>
<script type="text/javascript">
$(document).ready(function() {
var bigSrc = "";
var rolling= {
wrap : $('.roadPic ul'),
objs : $('.roadPic ul li'),
objWidth : 182,
ready : function() {
var _this = this;
_this.wrap.css('width', _this.objWidth * (_this.objs.length +1)+'px');
_this.objs.each(function (i){
$(this).css({'left': i*_this.objWidth + 'px'})
})
//이미지가 4개 이상인 경우만 sliding
if($('.roadPic ul li').length > 4) {
_this.start();
_this.objs.bind('mouseover',_this.stop);
_this.objs.bind('mouseout',_this.start);
}
_this.objs.bind('click',_this.zoom);
},
start: function(){
tm=setInterval(function(){
rolling.objs.each(function (i){
$(this).css({'left': parseInt($(this).css('left')) -3 +'px'})
if(parseInt($(this).css('left')) < parseInt(- rolling.objWidth) )$(this).css({'left': rolling.objWidth * (rolling.objs.length -1)+'px'})
})
},50)
},
stop: function(){
clearInterval(tm);
},
zoom:function(){
//$('#bigPic').html($(this).clone())
bigSrc = $(this).find("img").attr("src");
$('#bigPic').html("<img src='" + bigSrc + "' onClick='fImgView(this.src);'/>");
}
}
rolling.ready();
});
function fImgView(src) {
//상세화면 보기
}
</script>
</head>
<body class="totalPop">
<div class="totalBox">
<h2><span><img src='<c:url value="/resources/images/totalTit_pic.gif"/>' alt="사진 보기"></span></h2>
<div class="btn"></div>
<div class="totalBoxCnt">
<div class="roadPic">
<ul>
<c:forEach var="list" items="${dataList}" varStatus="cnt">
<li><img src="${list.fileUrl}" onerror="this.src='/resources/images/noImage_350x290.jpg'"/></li>
</c:forEach>
</ul>
</div>
<div id="bigPic"></div>
</div>
<div class="totalBoxBtm"><span></span></div>
</div>
</form>
</body>
</html>
'Carpe Programming > javascript' 카테고리의 다른 글
| ajax 전송 시 한글 깨짐 (0) | 2012.12.12 |
|---|---|
| 웹에서 한글(hwp) 파일 표출하기 (0) | 2012.12.11 |
| [datepicker] 달력 설정 (0) | 2012.10.23 |
| [iframe 크기 조정] iframe 안의 컨텐츠 사이즈만큼 창 크기 수정 (0) | 2012.10.08 |
| [jquery] api, 참고 사이트 (0) | 2012.09.26 |