문제.
1. float로 슬라이드 만들기
2. 슬라이드 마지막 장에서는 첫번째 장으로 돌아오게 하고 첫번째장은 뒤로 안돌아가게 하기
3. setInterval로 슬라이드 자동으로 돌아가게 하기
4. 마우스 오버, 마우스 아웃 됬을때 사진 멈추기(상태값)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Step05_Example2-2</title>
<!-- 3. setInterval로 슬라이드 자동으로 돌아가게 하기-->
<!-- 4. 마우스 오버, 마우스 아웃 됬을때 사진 멈추기(상태값) -->
<style>
/* 코드를 넣어보세요 */
</style>
</head>
<body>
<div class="wrapper">
<div class="box">
<img src="./images/image1.png" alt="">
<img src="./images/image2.png" alt="">
<img src="./images/image3.png" alt="">
<img src="./images/image4.png" alt="">
<img src="./images/image5.png" alt="">
</div>
</div>
<button id="prevBtn">«</button>
<button id="nextBtn">»</button>
<script src="./js/jquery-3.3.1.js"></script>
<script>
// 코드를 넣어보세요
</script>
</body>
</html>
정답
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Step05_Example2-2</title>
<!-- 3. setInterval로 슬라이드 자동으로 돌아가게 하기-->
<!-- 4. 마우스 오버, 마우스 아웃 됬을때 사진 멈추기(상태값) -->
<style>
.wrapper{
width: 400px;
height: 400px;
border: 2px solid red;
overflow: hidden;
}
.box{
width: 2000px;
border: 2px solid blue;
overflow: auto;
transition: margin-left 0.4s ease-out;
}
.box img{
width: 400px;
float: left;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box">
<img src="./images/image1.png" alt="">
<img src="./images/image2.png" alt="">
<img src="./images/image3.png" alt="">
<img src="./images/image4.png" alt="">
<img src="./images/image5.png" alt="">
</div>
</div>
<button id="prevBtn">«</button>
<button id="nextBtn">»</button>
<script src="./js/jquery-3.3.1.js"></script>
<script>
//
var mLeft=0;
var isMouseOver=false;
$(".wrapper").on("mouseover",function(){
isMouseOver=true;
});
$(".wrapper").on("mouseout",function(){
isMouseOver=false;
});
$("#nextBtn").on('click',function(){
setInterval(function(){
if(isMouseOver){
return;
}
if(mLeft==-1600){
mLeft=0;
$(".box").css("margin-left", mLeft+"px");
return;
}
mLeft-=400;
$(".box").css("margin-left", mLeft+"px");
}, 1000);
});
</script>
</body>
</html>'J QUERY' 카테고리의 다른 글
| 슬라이드 만들기1 (0) | 2019.11.26 |
|---|---|
| Jquery Event 연습2 (0) | 2019.11.25 |
| Jquery Event 연습1 (0) | 2019.11.25 |
| J query 동작 / Event / Effect (0) | 2019.11.25 |
| J Query 문법 / 옵션 (0) | 2019.11.25 |
