슬라이드 배너 중지 버튼
본문
-참고한 방법-
홈페이지에 배너 버튼을 저런식으로 만들어야 하는데 참고 방식처럼 해봤지만 중지 버튼이 없어서 해결이 안되고 있습니다. 혹시 저 링크들어가서 중지버튼 만드는 방법이 있을까요??
답변 2
intv라는 변수를 클리어 인터벌 한다는 내용으로 쓰셨는데
intv 변수를 선언한 곳이 없어보입니다.
셋인터벌을 intv라는 변수로 담으시고 클리어 하시면 되겠습니다.
var intv = setInterval(function(){
$('.main-bn > .slider > .page-btns > .next-btn').click();
}, 3000);
바트컨트롤 님 덕분에 잘 해결했습니다~ 알기 쉽게 설명해주셔서 감사합니다 ㅎㅎ
현재 인터벌로 자동을 걸어놨는데
버튼만드신후 해당 버튼에
클리어 인터벌을 하시면 되겠습니다.
clearInterval();
버튼 만든 후에 clearInterval(); 줘도 정지가 안되고 있습니다. 제이쿼리 초보라 코드 한번만 봐주실 수 있을까요??
<div class="main-bn">
<div class="slider">
<div class="slides">
<div class="bn active">
<a href="http://mbi.kaist.ac.kr"><img src="<?php echo G5_THEME_IMG_URL ?>/banner4.png" alt=""></a>
</div>
<div class="bn" style="background-image:url('https://kimyang-sun.github.io/pf-img/esc-img/main_bn_02.jpg');">
<a href="http://mbi.kaist.ac.kr"> <img src="<?php echo G5_THEME_IMG_URL ?>/banner3.png" alt=""></a>
</div>
<div class="bn" style="background-image:url('https://kimyang-sun.github.io/pf-img/esc-img/main_bn_03.jpg');">
<a href="http://mbi.kaist.ac.kr"> <img src="<?php echo G5_THEME_IMG_URL ?>/banner2.png" alt=""></a>
</div>
<div class="bn" style="background-image:url('https://kimyang-sun.github.io/pf-img/esc-img/main_bn_04.jpg');">
<a href="http://mbi.kaist.ac.kr"> <img src="<?php echo G5_THEME_IMG_URL ?>/banner1.png" alt=""></a>
</div>
</div>
<div class="page-btns">
<button class="page-btn prev-btn"><i class="xi-angle-left"></i></button>
<button class="stopBtn12"><span> ∥ </span></button>
<button class="page-btn next-btn"><i class="xi-angle-right"></i></button>
<div class="page-no">
<span class="current-slide-no"></span>
<span class="slash">/</span>
<span class="total-slide-no"></span>
</div>
</div>
</div>
</div>
<script>
console.clear();
// 상단 메인 배너 슬라이더
$('.main-bn > .slider > .page-btns > .page-btn').click(function(){
var $clicked = $(this);
var $slider = $(this).closest('.slider');
var index = $(this).index();
var isLeft = index == 0;
//console.log(index);
var $current = $slider.find(' > .slides > .bn.active');
var $post;
if ( isLeft ){
$post = $current.prev();
}
else {
$post = $current.next();
}
//console.log($post.length);
if ( $post.length == 0 ){
if ( isLeft ){
$post = $slider.find(' > .slides > .bn:last-child');
}
else {
$post = $slider.find(' > .slides > .bn:first-child');
}
}
$current.removeClass('active');
$post.addClass('active');
updateCurrentPageNumber();
});
setInterval(function(){
$('.main-bn > .slider > .page-btns > .next-btn').click();
}, 3000);
// 슬라이더 페이지 번호 지정
function pageNumber__Init(){
// 전채 배너 페이지 갯수 세팅해서 .slider 에 'data-slide-total' 넣기
var totalSlideNo = $('.main-bn > .slider > .slides > .bn').length;
//console.log(totalSlideNo);
$('.main-bn > .slider').attr('data-slide-total', totalSlideNo);
// 각 배너 페이지 번호 매기기
$('.main-bn > .slider > .slides > .bn').each(function(index, node){
$(node).attr('data-slide-no', index + 1);
});
};
pageNumber__Init();
// 슬라이더 이동시 페이지 번호 변경
function updateCurrentPageNumber(){
var totalSlideNo = $('.main-bn > .slider').attr('data-slide-total');
var currentSlideNo = $('.main-bn > .slider > .slides > .bn.active').attr('data-slide-no');
$('.main-bn > .slider > .page-btns > .page-no > .total-slide-no').html(totalSlideNo);
$('.main-bn > .slider > .page-btns > .page-no > .current-slide-no').html(currentSlideNo);
};
updateCurrentPageNumber()
$(".stopBtn12").click(function(){
clearInterval(intv);
});
</script>
