캐러셀 ‘한 영역에서 슬라이드 형태로 하나 이상의 이미지를 볼 수 있는 콘텐츠 또는 페이지’
버튼 눌러서 이미지 전환하기
CSS
<style>
div {
width: 320px;
margin: 0 auto;
position: relative;
}
div > a {
/*위치설정*/
position: absolute;
top: 150px;
/*모양(형태), 색상*/
width: 50px;
height: 50px;
background-color: hotpink;
border-radius: 25%;
/*텍스트 설정*/
text-decoration: none;
text-align: center;
line-height: 50px; /*세로방향 중앙정렬*/
font-size: 1.2em;
}
#prev {
left: 20px;
}
#next {
right: 20px;
}
</style>HTML
<div>
<img src="images/bimg01.jpg" alt="상품이미지">
<a id="prev" href="#">prev</a>
<a id="next" href="#">next</a>
</div>jQuery
<script>
$().ready(function(){
let imgNum = 1;
//next 클릭 시 다음 이미지 표시 img태그 src 속성값 변경
$("#next").click(function(){
imgNum++;
if(imgNum > 10) imgNum = 1;
if(imgNum < 10){
imgNum = "0" + imgNum;
}
$("img").prop("src", "images/bimg" + imgNum + ".jpg");
});
$("#prev").click(function(){
imgNum--;
if(imgNum < 1) imgNum = 10;
if(imgNum < 10){
imgNum = "0" + imgNum;
}
$("img").prop("src", "images/bimg" + imgNum + ".jpg");
});
});
</script> 이미지를 배열에 담아서
<script>
$().ready(function(){
let imgNames = new Array;
for(let i = 1; i < 11; i++){
if(i < 10) i = "0" + i;
imgNames[i] = "bimg" + i + ".jpg";
}
console.log(imgNames);
let idx = 1;
$("#prev").click(function(){
idx--;
if(idx < 10) idx = "0" + idx;
if(idx < 1) idx = 11;
$("img").prop("src", "images/" + imgNames[idx]);
});
$("#next").click(function(){
idx++;
if(idx < 10) idx = "0" + idx;
if(idx > 11) idx = 1;
$("img").prop("src", "images/" + imgNames[idx]);
});
});
</script> animate 배너
HTML
<body>
<h2>롤링 슬라이드 배너 만들기</h2>
<hr>
<div id="banner-wrap">
<div id="frame">
<ul id="banner">
<li><a href="#"><img src="img/number1.jpg"></a></li>
<li><a href="#"><img src="img/number2.jpg"></a></li>
<li><a href="#"><img src="img/number3.jpg"></a></li>
<li><a href="#"><img src="img/number4.jpg"></a></li>
<li><a href="#"><img src="img/number5.jpg"></a></li>
</ul>
</div>
<p>
<a id="prev" href="#"><img src="img/prev_btn.png"></a>
<span>이동하기</span>
<a id="next" href="#"><img src="img/next_btn.png"></a>
</p>
</div>
</body>CSS
<style>
* {margin: 0; padding: 0;}
h2 { text-align: center;}
#banner-wrap{
width: 600px;
padding: 20px;
border: 1px solid #aaa;
margin: 50px auto;}
#frame{
width: 600px;
position: relative;
overflow: hidden;
}
#banner {width: 3000px;}
#banner img { width: 200px;}
#banner li {
list-style: none;
float: left;
width: 200px;
}
#banner-wrap p {text-align: center; font-size: 2em;}
#banner-wrap p a {text-decoration: none;}
#banner {margin-left: -200px;}
</style>jQuery
<script>
$(document).ready(function(){
let $list = $("#banner");
console.log(":: 이미지 갯수 : " + $("#banner img").length);
// 앞의 이미지 3개를 복사(clone)해서 맨뒤에 붙이기
//console.log($("#banner li:lt(3)").clone());
$list.append($("#banner li:lt(3)").clone());
console.log(":: 이미지 갯수 : " + $("#banner img").length);
//next : 좌측 마진 값에서 -200 처리
let clickCnt = 0;
$("#next").click(function(){
$list.stop(true); //기존 애니메이션 있으면 중지(큐삭제)
clickCnt++;
console.log("전 clickCnt : " + clickCnt);
if (clickCnt > 5) {
$list.css("margin-left", "0px");
clickCnt = 1;
}
console.log("적용직전 clickCnt : " + clickCnt);
let marginLeft = -200 * clickCnt;
$list.animate({"margin-left" : marginLeft}, 300);
});
});
</script> 이전버튼 클릭 처리는 작성하지 않음
