jQuery main slide
2021. 12. 13. 12:36ㆍStudy/jQuery
CSS
@charset "utf-8";
/* CSS Document */
*{margin:0; padding:0;}
ul, li{list-style:none;}
img{border:0; vertical-align:top;}
.main{position:relative; width:1000px; height:420px; overflow: hidden}
.main .gallery{position:relative; left:0; top:0; width:5000px; height:380px; overflow:hidden;}
.main .gallery ul li{float:left;}
.main .gallery_text{position: absolute; top: 150px; width: 100%; }
.main .gallery_text li{text-align:center; font-size: 50px; color: #fff; background: rgba(0,0,0,.7); padding: 20px 0; display: none;}
.main .dock{position:absolute; left:450px; top:350px; width:500px;}
.main .dock .mbutton{float:left; display:block; width:16px; height:16px; margin-right:15px; cursor:pointer; background: #00f; border-radius:8px; transition: all .5s}
.main .dock .ps{float:left; display:block; width:25px; height:25px; margin-right:15px; margin-top: -5px; cursor:pointer; background:url(../images/stop.png)}
JS
// JavaScript Document
$(document).ready(function() {
var timeonoff; //자동기능 구현
var imageCount = 5; //이미지 개수 ***
var cnt = 1; //이미지 순서 1 2 3 4 5 4 3 2 1 2 3 4 5 ...
var direct = 1; //1씩 증가(+1)/감소(-1)
var position = 0; //겔러리 무비의 left값 0 -1000 -2000 -3000 -4000
var onoff = true; // true=>타이머 동작중 , false=>동작하지 않을때
// 초기셋팅
$('.btn1').css('background','#f00');
$('.btn1').css('width','30');
$('.gallery_text li:eq(0)').fadeIn('slow'); //첫번째 텍스트만 보여짐
// 자동 슬라이드
function moveg(){
cnt += direct; //카운트가 1 2 3 4 5 4 3 2 1 2 3 4 5 ......
position = -(cnt-1)*1000; // 현재 cnt에 해당하는 left값
$('.gallery_text li').hide(); //모든 텍스트를 안보이게...
$('.gallery_text li:eq('+ (cnt-1) +')').fadeIn('slow'); //해당 텍스트만 보여라
// 버튼 모두 off
$('.mbutton').css('background','#00f');
$('.mbutton').css('width','16');
// 현재 버튼 on
$('.btn'+cnt).css('background','#f00');
$('.btn'+cnt).css('width','30');
$('.gallery').animate({left:position}, 'slow'); // 이미지 left값
if(cnt == imageCount){ direct = -1; }
if(cnt == 1){ direct = 1; }
}
timeonoff= setInterval( moveg , 4000); //4초마다 자동기능
// 버튼 클릭 시
$('.mbutton').click(function(event){ //각각의 버튼을 클릭한다면...
var $target=$(event.target); //$target == this =>실제 클릭한 버튼
clearInterval(timeonoff); // 타이머 중지
// 버튼 모두 off
$('.mbutton').css('background','#00f');
$('.mbutton').css('width','16');
if($target.is('.btn1')){ //첫번째 버튼을 클릭했다면..
cnt = 1;
direct = 1;
}else if($target.is('.btn2')){ //두번째 버튼을 클릭했다면...
cnt = 2;
}else if($target.is('.btn3')){ //세번째 버튼을 클릭했다면...
cnt = 3;
}else if($target.is('.btn4')){ //네번째 버튼을 클릭했다면...
cnt = 4;
}else if($target.is('.btn5')){ //다섯번째 버튼을 클릭했다면...
cnt = 5;
direct = -1;
}
position = -(cnt-1)*1000; // 현재 cnt에 해당하는 left값
$('.gallery').animate({left:position}, 'slow');
$('.gallery_text li').hide(); // 텍스트 모두 off
$('.gallery_text li:eq('+ (cnt-1) +')').fadeIn('slow'); // 현재 텍스트 on
$('.btn'+cnt).css('background','#f00'); // 현재 버튼on
$('.btn'+cnt).css('width','30');
timeonoff= setInterval( moveg , 4000); //타이머의 재 동작
if(onoff==false){
onoff=true;
$('.ps').css('background','url(images/stop.png)');
}
});
//stop/play 버튼 클릭시 타이머 동작/중지
$('.ps').click(function(){
if(onoff==true){
clearInterval(timeonoff); // stop버튼 클릭시
$(this).css('background','url(images/play.png)');
onoff = false;
}else{
timeonoff= setInterval( moveg , 4000); //play버튼 클릭시
$(this).css('background','url(images/stop.png)');
onoff = true;
}
});
});
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>main_slide-ps3</title>
<link rel="stylesheet" href="css/layout.css">
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/move.js"></script>
</head>
<body>
<div class="main">
<div class="gallery">
<ul>
<li><a href="#"><img src="images/a1.jpg" alt=''></a></li>
<li><a href="#"><img src="images/a2.jpg" alt=''></a></li>
<li><a href="#"><img src="images/a3.jpg" alt=''></a></li>
<li><a href="#"><img src="images/a4.jpg" alt=''></a></li>
<li><a href="#"><img src="images/a5.jpg" alt=''></a></li>
</ul>
</div>
<div class="gallery_text">
<ul>
<li>이미지 텍스트01</li>
<li>이미지 텍스트02</li>
<li>이미지 텍스트03</li>
<li>이미지 텍스트04</li>
<li>이미지 텍스트05</li>
</ul>
</div>
<div class="dock">
<span class="mbutton btn1"></span>
<span class="mbutton btn2"></span>
<span class="mbutton btn3"></span>
<span class="mbutton btn4"></span>
<span class="mbutton btn5"></span>
<span class="ps"></span>
</div>
</div>
</body>
</html>
'Study > jQuery' 카테고리의 다른 글
| jQuery tabmenu1 (0) | 2021.12.14 |
|---|---|
| jQuery main slide fade ps lr (0) | 2021.12.13 |
| jQuery main slide - fade (0) | 2021.12.13 |
| jQuery slide scroll, quicktop, tab (0) | 2021.12.10 |
| jQuery 네비게이션 Full drop-down + 스크롤 반응 배경 (0) | 2021.12.09 |
