코리아 IT아카데미/Javascript·Jquery~~~
5일차 | 기본적인 갤러리, 일반적인 슬라이드 갤러리
Sharon kim
2022. 3. 17. 15:13
필요파일
images
jquery
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>기본적인 갤러리의 시작</title>
<style>
body {
margin: 20px auto;
padding: 0;
width: 620px;
background: #192839;
}
.thumbs {
float: left;
width: 100px;
}
.thumbs img {
margin-bottom: 3px;
padding: 5px;
border: 1px solid #ccc;
}
.thumbs img:hover {
border-color: #ef4018;
}
#largeImg {
margin-left: 110px;
padding: 5px;
width: 500px;
height: 280px;
border: 1px solid #ccc;
}
</style>
<script src="js/jquery.js"></script>
</head>
<body>
<div class="thumbs">
<a href="images/pic1.jpg" title="image1"
><img src="images/th_pic1.jpg"
/></a>
<a href="images/pic2.jpg" title="image2"
><img src="images/th_pic2.jpg"
/></a>
<a href="images/pic3.jpg" title="image3"
><img src="images/th_pic3.jpg"
/></a>
</div>
<div id="largeImg"><img src="images/pic1.jpg" alt="image1" /></div>
<script>
//제이쿼리에서 태그의 속성를 갖고 오거나 새로이 적용할때 attr()메소드를 사용
//속성을 갖고오는 방법은 var 변수 = $(대상).attr(갖고오고자하는속성을 지정);
//속성을 적용하는 방법은 $(대상을 지정하고).attr({속성객체:속성값저장한변수});
$(".thumbs a").click(function (e) {
e.preventDefault();
var path = $(this).attr("href");
// console.log(path);
if(path != $("#largeImg img").attr("src")){
$("#largeImg img").attr({ src: path });
$("#largeImg img").css({ opacity: 0 }).animate({ opacity: 1 });
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>기본적인 갤러리의 시작02</title>
<style>
body {
margin: 20px auto;
padding: 0;
width: 620px;
background: #192839;
}
.thumbs {
float: left;
width: 100px;
}
.thumbs img {
margin-bottom: 3px;
padding: 5px;
border: 1px solid #ccc;
}
.thumbs img:hover {
border-color: #ef4018;
}
#largeImg {
margin-left: 110px;
padding: 5px;
width: 500px;
height: 280px;
border: 1px solid #ccc;
overflow: hidden;
}
#caption {
position: relative;
padding: 10px;
font-family: "나눔고딕", "맑은 고딕";
font-size: 12px;
background: rgba(211, 209, 209, 0.3);
color: #fff;
border: 1px solid #ccc;
}
</style>
<script src="js/jquery.js"></script>
</head>
<body>
<div class="thumbs">
<a href="images/pic1.jpg" title="image1"
><img src="images/th_pic1.jpg"
/></a>
<em
>Lorem Ipsum is simply dummy text of the pdrinting and typesetting
industry.</em
>
<a href="images/pic2.jpg" title="image2"
><img src="images/th_pic2.jpg"
/></a>
<em
>Lorem Ipsum is simply dummy tely dummy thely dummy tegxt of thely try.
Sed facilisis, sem a luctus bibendum, dui risus pellentesque velit, quis
tempor magna sem vel justo. Etiam eget ipsum ante.</em
>
<a href="images/pic3.jpg" title="image3"
><img src="images/th_pic3.jpg"
/></a>
<em>Lorem Ipsum is simply dummy.</em>
</div>
<div id="largeImg"><img src="images/pic1.jpg" alt="image1" /></div>
<script>
//제이쿼리에서 태그의 속성를 갖고 오거나 새로이 적용할때 attr()메소드를 사용
//속성을 갖고오는 방법은 var 변수 = $(대상).attr(갖고오고자하는속성을 지정);
//속성을 적용하는 방법은 $(대상을 지정하고).attr({속성객체:속성값저장한변수});
$(".thumbs em").hide();
$(".thumbs a").click(function (e) {
e.preventDefault();
if ($("#caption")) {
$("#caption").remove();
}
var msg = $(this).next("em").text();
$("#largeImg").append("<div id='caption'></div>");
$("#largeImg #caption").text(msg);
var path = $(this).attr("href");
// console.log(path);
if (path != $("#largeImg img").attr("src")) {
$("#largeImg img").attr({ src: path });
$("#largeImg img").css({ opacity: 0 }).animate({ opacity: 1 });
}
var posy = $("#largeImg #caption").height() + 27;
$("#largeImg #caption").animate({ top: "-=" + posy + "px" });
});
// poy= 10 poy = poy + 20 => poy += 20 +=poy
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>일반적인 슬라이딩 갤러리</title>
<style>
body {
margin: 20px auto;
padding: 0;
width: 600px;
font-family: Arial, "sans-serif";
font-size: 11px;
background: #05184d;
}
div#slider {
margin: 0 auto;
position: relative; /* relative>absolute */
overflow: hidden;
width: 600px;
background: #fff;
border: 2px solid #fdf6dd;
}
div#viewer { /* relative>absolute */
position: relative;
height: 350px;
}
img {
position: absolute;
}
img#image1 {
left: 0;
top: 0;
}
img#image2 {
left: 600px;
top: 0;
}
img#image3 {
left: 1200px;
top: 0;
}
img#image4 {
left: 1800px;
top: 0;
}
#btnGroup {
position: absolute;
margin: 0;
padding: 0;
right: 0;
bottom: 2%;
}
#btnGroup li {
float: left;
margin-right: 6px;
width: 16px;
height: 16px;
list-style: none;
background: #60f;
cursor: pointer;
}
#btnGroup li a { /* display: block */
display: block;
width: 100%;
height: 100%;
line-height: 1.5;
text-align: center;
text-decoration: none;
background: #fdf6dd;
color: #000;
}
ul#btnGroup li a:hover {
background: #cf0;
}
</style>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
</head>
<body>
<div id="slider">
<div id="viewer">
<img id="image1" src="images/slide1.jpg" alt="" />
<img id="image2" src="images/slide2.jpg" alt="" />
<img id="image3" src="images/slide3.jpg" alt="" />
<img id="image4" src="images/slide4.jpg" alt="" />
</div>
<ul id="btnGroup">
<li id="btn0"><a href="images/slide1.jpg">1</a></li>
<li id="btn1"><a href="images/slide2.jpg">2</a></li>
<li id="btn2"><a href="images/slide3.jpg">3</a></li>
<li id="btn3"><a href="images/slide4.jpg">4</a></li>
</ul>
</div>
<script>
// jQuery로 sliding enging 만들기
$("#btnGroup a").click(function(e){
e.preventDefault();
var idName=$(this).parent().attr("id");
var n=idName.substr(3, 1);
n=parseInt(n);
// console.log("클릭된 li의 id : "+idName);
// console.log("클릭된 li의 id의 마지막 번호 : "+n);
slideTarget(n);
});
function slideTarget(n){
var pos=n*(-600)+"px";
// $("#viewer").stop().animate({left:pos}, 500);
$("#viewer").animate({left:pos}, 500, "easeInOutQuart");
}
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>일반적인 슬라이딩 갤러리02</title>
<style>
body {
margin: 20px auto;
padding: 0;
width: 600px;
font-family: Arial, "sans-serif";
font-size: 11px;
background: #05184d;
}
div#slider {
margin: 0 auto;
position: relative; /* relative>absolute */
overflow: hidden;
width: 600px;
background: #fff;
border: 2px solid #fdf6dd;
}
div#viewer { /* relative>absolute */
position: relative;
height: 350px;
}
img {
position: absolute;
}
img#image1 {
left: 0;
top: 0;
}
img#image2 {
left: 600px;
top: 0;
}
img#image3 {
left: 1200px;
top: 0;
}
img#image4 {
left: 1800px;
top: 0;
}
#btnGroup {
position: absolute;
margin: 0;
padding: 0;
right: 0;
bottom: 2%;
}
#btnGroup li {
float: left;
margin-right: 6px;
width: 16px;
height: 16px;
list-style: none;
background: #60f;
cursor: pointer;
}
#btnGroup li a { /* display: block */
display: block;
width: 100%;
height: 100%;
line-height: 1.5;
text-align: center;
text-decoration: none;
background: #fdf6dd;
color: #000;
}
ul#btnGroup li a:hover {
background: #cf0;
}
ul#btnGroup li a.act { /* 클릭한 정보 저장, 연한 주황색 */
background: #05184d;
color: #fff;
}
</style>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
</head>
<body>
<div id="slider">
<div id="viewer">
<img id="image1" src="images/slide1.jpg" alt="" />
<img id="image2" src="images/slide2.jpg" alt="" />
<img id="image3" src="images/slide3.jpg" alt="" />
<img id="image4" src="images/slide4.jpg" alt="" />
</div>
<ul id="btnGroup">
<li id="btn0"><a href="images/slide1.jpg">1</a></li>
<li id="btn1"><a href="images/slide2.jpg">2</a></li>
<li id="btn2"><a href="images/slide3.jpg">3</a></li>
<li id="btn3"><a href="images/slide4.jpg">4</a></li>
</ul>
</div>
<script>
var $current=$("#btn0").find("a");
$current.addClass("act");
$("#btnGroup a").click(function(e){
e.preventDefault();
$current.removeClass("act");
$current=$(this);
var idName=$(this).parent().attr("id");
var n=idName.substr(3, 1);
n=parseInt(n);
slideTarget(n);
});
function slideTarget(n){
var pos=n*(-600)+"px";
$("#viewer").animate({left:pos}, 500, "easeInOutQuart",
function(){
$current.addClass("act");
}
);
}
</script>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>일반적인 슬라이딩 갤러리03</title>
<style>
body {
margin: 20px auto;
padding: 0;
width: 600px;
font-family: Arial, "sans-serif";
font-size: 11px;
background: #05184d;
}
div#slider {
margin: 0 auto;
position: relative; /* relative>absolute */
overflow: hidden;
width: 600px;
background: #fff;
border: 2px solid #fdf6dd;
}
div#viewer { /* relative>absolute */
position: relative;
height: 350px;
}
img {
position: absolute;
}
button {
margin-top: 10px;
padding: 5px 12px;
background: #000;
color: #ccc;
border: none;
cursor: pointer;
}
img#image1 {
left: 0;
top: 0;
}
img#image2 {
left: 600px;
top: 0;
}
img#image3 {
left: 1200px;
top: 0;
}
img#image4 {
left: 1800px;
top: 0;
}
#btnGroup {
position: absolute;
margin: 0;
padding: 0;
right: 0;
bottom: 2%;
}
#btnGroup li {
float: left;
margin-right: 6px;
width: 16px;
height: 16px;
list-style: none;
background: #60f;
cursor: pointer;
}
#btnGroup li a { /* display: block */
display: block;
width: 100%;
height: 100%;
line-height: 1.5;
text-align: center;
text-decoration: none;
background: #fdf6dd;
color: #000;
}
ul#btnGroup li a:hover {
background: #cf0;
}
ul#btnGroup li a.act {
background: #05184d;
color: #fff;
}
</style>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
</head>
<body>
<div id="slider">
<div id="viewer">
<img id="image1" src="images/slide1.jpg" alt="" />
<img id="image2" src="images/slide2.jpg" alt="" />
<img id="image3" src="images/slide3.jpg" alt="" />
<img id="image4" src="images/slide4.jpg" alt="" />
</div>
<ul id="btnGroup">
<li id="btn0"><a href="images/slide1.jpg">1</a></li>
<li id="btn1"><a href="images/slide2.jpg">2</a></li>
<li id="btn2"><a href="images/slide3.jpg">3</a></li>
<li id="btn3"><a href="images/slide4.jpg">4</a></li>
</ul>
</div>
<button id="prev">previous</button><button id="next">next</button>
<script>
var current=0; //처음에 보이는 이미지의 인덱스 설정
var $current=$("#btn"+current).find("a"); //btn0
$current.addClass("act");
$("#btnGroup a").click(function(e){
e.preventDefault();
$current.removeClass("act");
$current=$(this);
var idName=$(this).parent().attr("id"); //btn2
var n=idName.substr(3, 1); //$(대상).메소드(), 메소드( $(대상))
// btn2=> btn글자3자 삭제하고 남은글자1자인 2를 변수N에게 대입 , substr(삭제하고자하는 글자수, 선택자하는글자수)
n=parseInt(n);//소수점이하 숫자은 삭제하고 정수로 값을 변환해서
slideTarget(n);
});
$("#prev").click(function(e){
e.preventDefault();
if(current > 0){
current--;
$current.removeClass("act");
$current=$("#btn"+current).find("a");
slideTarget(current);
}
});
$("#next").click(function(e){
e.preventDefault();
if(current < 3){
current++;
$current.removeClass("act");
$current=$("#btn"+current).find("a");
slideTarget(current);
}
});
function slideTarget(n){
var pos=n*(-600)+"px";
current=n;
$("#viewer").animate({left:pos}, 500, "easeInOutQuart",
function(){
$current.addClass("act");
}
);
}
</script>
</body>
</html>내가 한 것
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0; padding: 0;}
img{border:0}
ul, li{list-style: none;}
a{text-decoration: none;}
/* 전체영역 */
#slider{margin: 0 auto; position: relative;
width: 600px; height: 350px;
border: 3px solid #000; overflow: hidden;}
/* 이미지박스 */
#viewer{height: 350px; position: relative;}
/* 이미지 좌표 */
#viewer > img{position: absolute; top:0px;}
#viewer > img:nth-child(1){left:0;}
#viewer > img:nth-child(2){left:600px;}
#viewer > img:nth-child(3){left:1200px;}
#viewer > img:nth-child(4){left:1800px;}
/* 버튼 */
.btns{ position: absolute; right: 20px; top:320px }
.btns li{float: left;
width: 16px; height: 16px;
margin-right: 6px;
border: 1px solid #fff;
text-align: center; line-height: 16px;
}
.btns li a{display: block; color: #fff;
background-color: black;}
.btns li.on a{ background-color:rgb(219, 208, 230);
color: #000;}
#btn_g{margin: 0 auto; margin-top: 15px; width: 600px; }
button{border: none; background-color: #000;
padding: 5px 12px; color:#ccc;
cursor: pointer;}
</style>
<script src="js/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function(){
var current = 0; //현재 보이는 이미지 인덱스 값
$(".btns > li").click(function(e){
e.preventDefault();
var n = $(this).index();
$(".btns > li").removeClass("on");
$(this).addClass("on");
slide_ani(n);
});
//next
$("#next").click(function(e){
e.preventDefault();
if(current < 3){
current++; //0 ,1 ,2 ,3
$(".btns > li").removeClass("on");
$(".btns > li").eq(current).addClass("on");
slide_ani(current);
}else{
current = 0;
$(".btns > li").removeClass("on");
$(".btns > li").eq(current).addClass("on");
slide_ani(current);
}
});
//prev
$("#prev").click(function(e){
e.preventDefault();
if(current > 0){
current--;
$(".btns > li").removeClass("on");
$(".btns > li").eq(current).addClass("on");
slide_ani(current);
}else{
current = 3;
$(".btns > li").removeClass("on");
$(".btns > li").eq(current).addClass("on");
slide_ani(current);
}
});
//viewer 이미지 그룹의 애니메이션
function slide_ani(n){
var pos = n * (-600) + "px"; //0, 1, 2, 3
current = n;
$("#viewer").animate({left:pos},1000);
}
});
</script>
</head>
<body>
<div id="slider">
<div id="viewer">
<img src="images/slide1.jpg" alt=""><!--0 * 0-->
<img src="images/slide2.jpg" alt=""><!--1 * 600-->
<img src="images/slide3.jpg" alt=""><!--2 * 1200-->
<img src="images/slide4.jpg" alt=""><!--3 * 1800-->
</div>
<ul class="btns">
<li class="on"><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
</ul>
</div>
<div id="btn_g">
<button id="prev">previous</button>
<button id="next">next</button>
</div>
</body>
</html>