<!doctype html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<style>
*{margin: 0; padding: 0;}
img{display: block; border: 0;}
</style>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$('#mask').css({
width:600,
height:400,
border:'10px solid black',
margin:'0 auto',
position:'relative',
overflow:'hidden'
});
$('#img_wrap').css({
width:3000,
height:400,
backgroundColor:'lightblue',
position:'absolute',
top:0,
left:0
});
$('#img_wrap>img').css({
width:600,
height:400,
float:'left'
});
$('.arrow').css({
width:50,
height:50,
backgroundColor:'#fff',
position:'absolute',
top:'50%',
marginTop:-25,
textAlign:'center',
lineHeight:'50px'
});
$('#left').css({
left:0
});
$('#right').css({
right:0
});
var i = 0;
$('#right').click(function(){
i++;
if(i>4){
i=0;
}
console.log(i);
$('#img_wrap').animate({
left:-600*i
});
});
});//end
</script>
</head>
<body>
<div id="mask">
<div id="img_wrap">
<img src="img/kiminonaha.jpg" alt="" />
<img src="img/totoro.jpg" alt="" />
<img src="img/sen.jpeg" alt="" />
<img src="img/tangled.png" alt="" />
<img src="img/pooh.jpg" alt="" />
</div>
<h1 class="arrow" id="left"><</h1>
<h1 class="arrow" id="right">></h1>
</div>
</body>
</html>
코딩 기록 블로그