티스토리 뷰
참고 사이트 : http://hong.adfeel.info/frontend/%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C-%EC%98%88%EC%A0%9C/
슬라이드 예제 - hong's blog
슬라이드 통합 기능 1.이전/다음버튼 클릭시 이동 2.dot버튼클릭시 해당 슬라이드로 이동 3.3초마다 자동으로 화면넘김 4.마우스올렸을때 자동실행 멈춤 5.마우스올렸다가 다시내렸을때 다시 자동실행 6.화면 사이즈 조정시 슬라이드 width값 다시불러옴
hong.adfeel.info
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-3.3.1.js"></script>
<script>
$(document).ready(function() {
slide();
});
// 슬라이드
function slide() {
var wid = 0;
var now_num = 0;
var slide_length = 0;
var auto = null;
var $dotli = $('.dot>li');
var $panel = $('.panel');
var $panelLi = $panel.children('li');
// 변수 초기화
function init() {
wid = $('.slide').width();
now_num = $('.dot>li.on').index();
slide_length = $dotli.length;
}
// 이벤트 묶음
function slideEvent() {
// 슬라이드 하단 dot버튼 클릭했을때
$dotli.click(function() {
now_num = $(this).index();
slideMove();
});
// 이후 버튼 클릭했을때
$('.next').click(function() {
nextChkPlay();
});
// 이전 버튼 클릭했을때
$('.prev').click(function() {
prevChkPlay();
});
// 오토플레이
autoPlay();
// 오토플레이 멈춤
autoPlayStop();
// 오토플레이 재시작
autoPlayRestart();
// 화면크기 재설정 되었을때
resize();
}
// 자동실행 함수
function autoPlay() {
auto = setInterval(function() {
nextChkPlay();
}, 3000);
}
// 자동실행 멈춤
function autoPlayStop() {
$panelLi.mouseenter(function() {
clearInterval(auto);
});
}
// 자동실행 멈췄다가 재실행
function autoPlayRestart() {
$panelLi.mouseleave(function() {
auto = setInterval(function() {
nextChkPlay();
}, 3000);
});
}
// 이전 버튼 클릭시 조건 검사후 슬라이드 무브
function prevChkPlay() {
if (now_num == 0) {
now_num = slide_length - 1;
} else {
now_num--;
}
slideMove();
}
// 이후 버튼 클릭시 조건 검사후 슬라이드 무브
function nextChkPlay() {
if (now_num == slide_length - 1) {
now_num = 0;
} else {
now_num++;
}
slideMove();
}
// 슬라이드 무브
function slideMove() {
$panel.stop().animate({
'margin-left': -wid * now_num
});
$dotli.removeClass('on');
$dotli.eq(now_num).addClass('on');
}
// 화면크기 조정시 화면 재설정
function resize() {
$(window).resize(function() {
init();
$panel.css({
'margin-left': -wid * now_num
});
});
}
init();
slideEvent();
}
</script>
<style>
* {
margin: 0px;
padding: 0px;
}
ul,
ol,
li {
list-style: none;
}
a {
text-decoration: none;
}
img {
vertical-align: top;
border: none;
}
.slide {
position: relative;
padding-top: 50px;
overflow: hidden;
}
.panel {
width: 400%;
}
.panel:after {
content: "";
display: block;
clear: both;
}
.panel>li {
width: 25%;
height: 200px;
float: left;
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
}
.panel>li:nth-of-type(1) {
background-color: red;
}
.panel>li:nth-of-type(2) {
background-color: blue;
}
.panel>li:nth-of-type(3) {
background-color: green;
}
.dot:after {
content: "";
display: block;
clear: both;
}
.dot {
position: absolute;
left: 50%;
bottom: 10%;
transform: translateX(-50%);
}
.dot>li {
float: left;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #fff;
margin-left: 10px;
margin-right: 10px;
text-indent: -9999px;
cursor: pointer;
}
.dot>li.on {
background-color: #342f2f;
}
</style>
</head>
<body>
<div class="slide">
<ul class="panel">
<li>1번슬라이드</li>
<li>2번슬라이드</li>
<li>3번슬라이드</li>
</ul>
<ul class="dot">
<li class="on">슬라이드 버튼1번</li>
<li>슬라이드 버튼2번</li>
<li>슬라이드 버튼3번</li>
</ul>
</div>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 한글/영어 글자수 체크하기 (0) | 2020.05.27 |
|---|---|
| lightslide 예제 (0) | 2019.08.20 |
| Bootstrap Input 태그의 Clear 버튼 구현 (0) | 2019.06.03 |
| textarea 저장 줄바꿈 없이 출력 표시 (0) | 2019.05.09 |
| jquery slideToggle 접기 펼치기 응용 (0) | 2019.03.13 |