<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<!--PG크로스브라우징필수내용 시작-->
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--PG크로스브라우징필수내용 끝-->
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--PG크로스브라우징필수내용 끝-->
<title>기본 레이아웃</title>
<!--@css(/layout/basic/css/common.css)--><!--해당 CSS는 쇼핑몰 전체 페이지에 영향을 줍니다. 삭제와 수정에 주의해주세요.-->
<!--@css(/layout/basic/css/layout.css)-->
<!-- 스마트디자인에서는 최신 JQuery가 내장되어있습니다. 추가로 호출하면 충돌이 생길 수 있습니다. -->
<!--@js(/layout/basic/js/basic.js)-->
<!--@js(/js/common.js)-->
<style type="text/css">
/*reset*/
body,ul,ol,li,dl,dt,dd,p,h1,h2,h3,h4,h5,h6{margin:0; padding:0;}
ul,ol{list-style:none;}
img{border:0; vertical-align: top;}
li{float:left; }
<!--@css(/layout/basic/css/common.css)--><!--해당 CSS는 쇼핑몰 전체 페이지에 영향을 줍니다. 삭제와 수정에 주의해주세요.-->
<!--@css(/layout/basic/css/layout.css)-->
<!-- 스마트디자인에서는 최신 JQuery가 내장되어있습니다. 추가로 호출하면 충돌이 생길 수 있습니다. -->
<!--@js(/layout/basic/js/basic.js)-->
<!--@js(/js/common.js)-->
<style type="text/css">
/*reset*/
body,ul,ol,li,dl,dt,dd,p,h1,h2,h3,h4,h5,h6{margin:0; padding:0;}
ul,ol{list-style:none;}
img{border:0; vertical-align: top;}
li{float:left; }
#container{position:relative; margin-left:150px; margin-top:200px; width:1024px; height:399px;}
#mas{width:925px; height:265px; position:absolute; top:65px;left:55px; overflow:hidden;}
#gall {position: absolute; width:2000px; height:255px;top:0px;left:-10px; }
#gall li{float:left; width:235px; height:255px; cursor: pointer;}
#mas{width:925px; height:265px; position:absolute; top:65px;left:55px; overflow:hidden;}
#gall {position: absolute; width:2000px; height:255px;top:0px;left:-10px; }
#gall li{float:left; width:235px; height:255px; cursor: pointer;}
#g_nav{position:absolute;left:430px;top:370px;float:left; width:151px;height:15px;}
#g_nav img{cursor:pointer;}
#g_nav li {width:13px; height:17px; margin-right:5px; background-image:url(/web/upload/scroll//web/upload/scroll/images/h_b2.gif) no-repeat; cursor:pointer;}
#g_nav img{cursor:pointer;}
#g_nav li {width:13px; height:17px; margin-right:5px; background-image:url(/web/upload/scroll//web/upload/scroll/images/h_b2.gif) no-repeat; cursor:pointer;}
#pre{position: absolute; top:165px; left:10px; cursor: pointer;}
#nex{position:absolute; top:165px; left:985px; cursor:pointer;}
#nex{position:absolute; top:165px; left:985px; cursor:pointer;}
</style>
<!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
<script type="text/javascript" src="/web/upload/scroll/images/js/jquery-1.9.1.min.js"></script>
<!-- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
<script type="text/javascript" src="/web/upload/scroll/images/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#gall li:last").prependTo("#gall");
//갤러리의 마지막 이미지를 갤러리안의 가장 앞으로 배치
$("#gall").css("marginLeft","-230px");
$("#pre").click(function(){//이전 이미지가 슬라이드된후 마지막 이미지를 갤러리안의 젤 앞으로 배치
$("#gall").animate({
marginLeft:"+=230px"},"slow","swing",function(){
$("#gall li:last").prependTo("#gall");
$("#gall").css("marginLeft","-230px");
});
$("ul").css("listStyle","none");
$("li").css("listStyle","none");
});
$("#nex").click(function(){//다음 이미지가 슬라이드된후 젤앞의 이미지를 갤러리안의 젤 마지막으로 배치
$("#gall").animate({
marginLeft:"-=230px"},"slow","swing",function(){
$("#gall li:first").appendTo("#gall");
$("#gall").css("marginLeft","-230px");
});
$("ul").css("listStyle","none");
$("li").css("listStyle","none");
$(function(){
$("#gall li:last").prependTo("#gall");
//갤러리의 마지막 이미지를 갤러리안의 가장 앞으로 배치
$("#gall").css("marginLeft","-230px");
$("#pre").click(function(){//이전 이미지가 슬라이드된후 마지막 이미지를 갤러리안의 젤 앞으로 배치
$("#gall").animate({
marginLeft:"+=230px"},"slow","swing",function(){
$("#gall li:last").prependTo("#gall");
$("#gall").css("marginLeft","-230px");
});
$("ul").css("listStyle","none");
$("li").css("listStyle","none");
});
$("#nex").click(function(){//다음 이미지가 슬라이드된후 젤앞의 이미지를 갤러리안의 젤 마지막으로 배치
$("#gall").animate({
marginLeft:"-=230px"},"slow","swing",function(){
$("#gall li:first").appendTo("#gall");
$("#gall").css("marginLeft","-230px");
});
$("ul").css("listStyle","none");
$("li").css("listStyle","none");
});
})
</script>
</head>
<body id="main">
<div id="accNav">
<p><a href="#contents">컨텐츠 바로가기</a></p>
</div>
</script>
</head>
<body id="main">
<div id="accNav">
<p><a href="#contents">컨텐츠 바로가기</a></p>
</div>
<div id="wrap">
<!--Header--><!--@import(/layout/basic/header.html)-->
<!--Header--><!--@import(/layout/basic/header.html)-->
<hr class="layout" />
<div id="container"> <img src="/web/upload/scroll/images/scroll_bg.jpg" />
<div id="mas">
<div id="gall">
<ul>
<li><img src="/web/upload/scroll/images/img1.jpg" onmouseover="this.src='/web/upload/scroll/images/img1_over.jpg'" onmouseout="this.src='/web/upload/scroll/images/img1.jpg'" /></li>
<li><img src="/web/upload/scroll/images/img2.jpg" onmouseover="this.src='/web/upload/scroll/images/img2_over.jpg'" onmouseout="this.src='/web/upload/scroll/images/img2.jpg'" /></li>
<li><img src="/web/upload/scroll/images/img3.jpg" onmouseover="this.src='/web/upload/scroll/images/img3_over.jpg'" onmouseout="this.src='/web/upload/scroll/images/img3.jpg'" /></li>
<li><img src="/web/upload/scroll/images/img4.jpg" onmouseover="this.src='/web/upload/scroll/images/img4_over.jpg'" onmouseout="this.src='/web/upload/scroll/images/img4.jpg'" /></li>
<li><img src="/web/upload/scroll/images/img5.jpg" onmouseover="this.src='/web/upload/scroll/images/img5_over.jpg'" onmouseout="this.src='/web/upload/scroll/images/img5.jpg'" /></li>
<li><img src="/web/upload/scroll/images/img1.jpg" onmouseover="this.src='/web/upload/scroll/images/img1_over.jpg'" onmouseout="this.src='/web/upload/scroll/images/img1.jpg'" /></li>
<li><img src="/web/upload/scroll/images/img2.jpg" onmouseover="this.src='/web/upload/scroll/images/img2_over.jpg'" onmouseout="this.src='/web/upload/scroll/images/img2.jpg'" /></li>
<li><img src="/web/upload/scroll/images/img3.jpg" onmouseover="this.src='/web/upload/scroll/images/img3_over.jpg'" onmouseout="this.src='/web/upload/scroll/images/img3.jpg'" /></li>
<li><img src="/web/upload/scroll/images/img4.jpg" onmouseover="this.src='/web/upload/scroll/images/img4_over.jpg'" onmouseout="this.src='/web/upload/scroll/images/img4.jpg'" /></li>
<li><img src="/web/upload/scroll/images/img5.jpg" onmouseover="this.src='/web/upload/scroll/images/img5_over.jpg'" onmouseout="this.src='/web/upload/scroll/images/img5.jpg'" /></li>
</ul>
</div>
</div>
<div id="pre"><img src="/web/upload/scroll/images/left_bt.jpg" /></div>
<div id="nex"><img src="/web/upload/scroll/images/right_bt.jpg" /></div>
</div>
<div id="container"> <img src="/web/upload/scroll/images/scroll_bg.jpg" />
<div id="mas">
<div id="gall">
<ul>
<li><img src="/web/upload/scroll/images/img1.jpg" onmouseover="this.src='/web/upload/scroll/images/img1_over.jpg'" onmouseout="this.src='/web/upload/scroll/images/img1.jpg'" /></li>
<li><img src="/web/upload/scroll/images/img2.jpg" onmouseover="this.src='/web/upload/scroll/images/img2_over.jpg'" onmouseout="this.src='/web/upload/scroll/images/img2.jpg'" /></li>
<li><img src="/web/upload/scroll/images/img3.jpg" onmouseover="this.src='/web/upload/scroll/images/img3_over.jpg'" onmouseout="this.src='/web/upload/scroll/images/img3.jpg'" /></li>
<li><img src="/web/upload/scroll/images/img4.jpg" onmouseover="this.src='/web/upload/scroll/images/img4_over.jpg'" onmouseout="this.src='/web/upload/scroll/images/img4.jpg'" /></li>
<li><img src="/web/upload/scroll/images/img5.jpg" onmouseover="this.src='/web/upload/scroll/images/img5_over.jpg'" onmouseout="this.src='/web/upload/scroll/images/img5.jpg'" /></li>
<li><img src="/web/upload/scroll/images/img1.jpg" onmouseover="this.src='/web/upload/scroll/images/img1_over.jpg'" onmouseout="this.src='/web/upload/scroll/images/img1.jpg'" /></li>
<li><img src="/web/upload/scroll/images/img2.jpg" onmouseover="this.src='/web/upload/scroll/images/img2_over.jpg'" onmouseout="this.src='/web/upload/scroll/images/img2.jpg'" /></li>
<li><img src="/web/upload/scroll/images/img3.jpg" onmouseover="this.src='/web/upload/scroll/images/img3_over.jpg'" onmouseout="this.src='/web/upload/scroll/images/img3.jpg'" /></li>
<li><img src="/web/upload/scroll/images/img4.jpg" onmouseover="this.src='/web/upload/scroll/images/img4_over.jpg'" onmouseout="this.src='/web/upload/scroll/images/img4.jpg'" /></li>
<li><img src="/web/upload/scroll/images/img5.jpg" onmouseover="this.src='/web/upload/scroll/images/img5_over.jpg'" onmouseout="this.src='/web/upload/scroll/images/img5.jpg'" /></li>
</ul>
</div>
</div>
<div id="pre"><img src="/web/upload/scroll/images/left_bt.jpg" /></div>
<div id="nex"><img src="/web/upload/scroll/images/right_bt.jpg" /></div>
</div>
밑의 소스는 생략했구요.
http://www.blancdecor.com 사이트 처럼 전광판의 이미지 5개가 시간차를 두고 왼쪽으로 한칸씩 움직이게 하고 싶은데
어떤 소스를 더 넣어야 하나요. 지금은 좌측 우측 버튼을 눌러야 이미지가 움직입니다.
게시글 목록
| 번호 | 제목 |
|---|---|
| 27925 | |
| 27922 | |
| 6972 | |
| 19602 |
JavaScript
jQuery 의 delegate 흉내내기
1
|
| 19601 |
JavaScript
script 디버깅 - JSHint
|
| 19599 |
jQuery
jQuery 롤링배너 플러그인
1
|
| 6961 | |
| 30941 | |
| 19597 | |
| 19596 | |
| 19595 | |
| 19594 |
JavaScript
스크립트 for문
|
| 30939 |
HTML
디바이스별 해상도 확인
1
|
| 19593 | |
| 6959 | |
| 6957 | |
| 6953 | |
| 27920 | |
| 19592 |
PHP
php oop 단일 모드
|
| 19591 | |
| 19590 |
PHP
IP class 비교 함수
|
| 6949 | |
| 6947 | |
| 20826 |
이미지관련
문자열이미지에 각종 필터를 적용한 결과
7
|
| 20823 |
이미지관련
이미지에 각종 필터를 적용한 결과
2
|
| 19589 |
jQuery
심플한 파일첨부 버튼과 jquery
|
| 27913 | |
| 27912 | |
| 19588 |
JavaScript
자바스크립트 시작날짜 종료날짜 유효성 검사 함수
|
| 20822 |
이미지관련
프레임이미지와 얼굴이미지 합치기
|
| 19587 | |
| 19586 |
PHP
한국 IP대역 체크
|
| 27887 | |
| 20819 | |
| 27883 | |
| 19585 | |
| 19584 | |
| 19583 |
JavaScript
중첩없이 랜덤수 뽑아내기
|
| 19582 | |
| 19581 | |
| 19580 | |
| 6945 | |
| 24622 | |
| 19578 |
JavaScript
자바스크립트에서 for문 사용시 속도차이
1
|
| 6938 | |
| 6935 | |
| 27880 | |
| 20818 | |
| 19575 | |
| 20815 |
이미지관련
이미지 너비에 맞게 문자열의 자동 개행
2
|
| 20812 | |
| 20809 |
이미지관련
문자열 그릴때 패딩 주기
2
|
| 6932 | |
| 6931 | |
| 6929 | |
| 19571 |
Mobile
html5 지원되는 os별 버전보기
3
|
| 19570 | |
| 20802 |
이미지관련
위치에 따른 이미지에 문자열 그리기
6
|
| 27877 | |
| 20797 | |
| 6923 | |
| 20795 |
이미지관련
문자열의 너비와 높이 구하기
1
|
| 6918 | |
| 6914 | |
| 20789 |
이미지관련
이미지에 글자 쓰기
5
|
| 6899 | |
| 27860 | |
| 6898 | |
| 27856 | |
| 6895 | |
| 6891 | |
| 6890 | |
| 6881 | |
| 6874 | |
| 27852 | |
| 6860 | |
| 6857 | |
| 19569 | |
| 19565 | |
| 19564 | |
| 27844 | |
| 19563 | |
| 24617 | |
| 19554 | |
| 6854 | |
| 19553 | |
| 19531 | |
| 6850 | |
| 6848 | |
| 27842 | |
| 6846 | |
| 6842 | |
| 6839 | |
| 6834 | |
| 6829 | |
| 6824 | |
| 6820 | |
| 27839 | |
| 6818 | |
| 19529 |
JavaScript
그누보드5 에 Daum 우편번호 찾기 API 연동 하기
1
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기