jsp(HTML)
mtSlideDiv는 몇 개가 늘어나든 상관없다.
<div class="slideshow-container">
<div class="mySlideDiv fade active">
<img src="img.jpg">
</div>
<div class="mySlideDiv fade">
<img src="img.jpg">
</div>
<div class="mySlideDiv fade">
<img src="img.jpg">
</div>
<a class="prev" onclick="prevSlide()">❮</a>
<a class="next" onclick="nextSlide()">❯</a>
</div>
javascript(jQuery)
<script type="text/javascript">
$(document).ready(function () {
$(".mySlideDiv").not(".active").hide(); //화면 로딩 후 첫번째 div를 제외한 나머지 숨김
setInterval(nextSlide, 4000); //4초(4000)마다 다음 슬라이드로 넘어감
});
//이전 슬라이드
function prevSlide() {
$(".mySlideDiv").hide(); //모든 div 숨김
var allSlide = $(".mySlideDiv"); //모든 div 객체를 변수에 저장
var currentIndex = 0; //현재 나타난 슬라이드의 인덱스 변수
//반복문으로 현재 active클래스를 가진 div를 찾아 index 저장
$(".mySlideDiv").each(function(index,item){
if($(this).hasClass("active")) {
currentIndex = index;
}
});
//새롭게 나타낼 div의 index
var newIndex = 0;
if(currentIndex <= 0) {
//현재 슬라이드의 index가 0인 경우 마지막 슬라이드로 보냄(무한반복)
newIndex = allSlide.length-1;
} else {
//현재 슬라이드의 index에서 한 칸 만큼 뒤로 간 index 지정
newIndex = currentIndex-1;
}
//모든 div에서 active 클래스 제거
$(".mySlideDiv").removeClass("active");
//새롭게 지정한 index번째 슬라이드에 active 클래스 부여 후 show()
$(".mySlideDiv").eq(newIndex).addClass("active");
$(".mySlideDiv").eq(newIndex).show();
}
//다음 슬라이드
function nextSlide() {
$(".mySlideDiv").hide();
var allSlide = $(".mySlideDiv");
var currentIndex = 0;
$(".mySlideDiv").each(function(index,item){
if($(this).hasClass("active")) {
currentIndex = index;
}
});
var newIndex = 0;
if(currentIndex >= allSlide.length-1) {
//현재 슬라이드 index가 마지막 순서면 0번째로 보냄(무한반복)
newIndex = 0;
} else {
//현재 슬라이드의 index에서 한 칸 만큼 앞으로 간 index 지정
newIndex = currentIndex+1;
}
$(".mySlideDiv").removeClass("active");
$(".mySlideDiv").eq(newIndex).addClass("active");
$(".mySlideDiv").eq(newIndex).show();
}
</script>
CSS
/* Slideshow container */
.slideshow-container {
max-width: 1440px;
position: relative;
margin: auto;
margin-top: 120px;
}
/* effect */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
결과
'Front > JQuery' 카테고리의 다른 글
[네이버지도API/AJAX] 마커 여러 개 띄우기/디비에 있는 데이터 지도에 표시하기/지도를 움직일 때마다 중심 좌표 얻기/현재 화면에 보이는 마커만 표시하기 (0) | 2021.07.15 |
---|---|
[네이버지도API] 해당 지역에 마커 찍기, 마커 아이콘 변경 (0) | 2021.07.12 |
[JQuery-3.6.0] 효과-애니메이션(Animation) 처리 (0) | 2021.04.29 |
[JQuery-3.6.0] 이벤트(Event) 처리 (0) | 2021.04.29 |
[JQuery-3.6.0] 요소(속성) 편집 메서드 (0) | 2021.04.28 |