jQuery main slide - fade
2021. 12. 13. 10:00ㆍStudy/jQuery
CSS
@charset "utf-8";
/* CSS Document */
*{margin:0; padding:0;}
a{color:#333; text-decoration: none;}
img{border:0; vertical-align:top;}
ul li{list-style:none;}
@keyframes ani {
from {transform: scale(1);}
to {transform: scale(1.5);}
}
.main{ position:relative; width:1000px; height:420px; border:1px solid red; overflow:hidden}
.main .gallery{position:relative; left:0; top:0; width:1000px; height:380px; overflow:hidden;}
.main .gallery li{position:relative; display: none;}
.main .gallery li img{animation: ani 30s linear infinite;}
.main .gallery li span{position: absolute; left:100px; top:100px; font-size:50px; font-weight:bold;}
.main .dock{position:absolute; left:450px; top:380px; width:330px;}
.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 1 2 3 4 5....
var onoff = true; // true:타이머 동작중, false:동작하지 않을때 ( play, stop기능에 필요)
// 초기 셋팅
$('.btn1').css('background','#f00'); // 첫번째 버튼 on 컬러 변경
$('.btn1').css('width','50'); // 첫번째 버튼 on 너비 증가
$('.gallery .link1').fadeIn('slow'); // 첫번째 이미지 on
// 자동 이벤트
function moveg(){
cnt++; //카운트 1씩 증가.. 5가되면 다시 초기화 0 1 2 3 4 5 1 2 3 4 5..
$('.gallery li').hide(); // 갤러리 전부 끔
$('.gallery .link'+cnt).fadeIn('slow'); // 자신만 갤러리 킴
// 버튼 전부 끔
$('.mbutton').css('background','#00f');
$('.mbutton').css('width','16');
// 나만 버튼 킴
$('.btn'+cnt).css('background','#f00');
$('.btn'+cnt).css('width','30');
if(cnt == imageCount){ cnt=0; } // cnt가 5가 되면 cnt 초기화
}
timeonoff = setInterval( moveg , 4000);// 타이머를 동작 1~5이미지를 순서대로 자동 처리
// 클릭 이벤트
$('.mbutton').click(function(event){ //각각의 버튼 클릭시
var $target = $(event.target); //클릭한 버튼 $target == $(this)
clearInterval(timeonoff); //타이머 중지
$('.gallery li').hide(); // 갤러리 전부 끔
for(i=0; i<=imageCount; i++){
if($target.attr('class') == 'mbutton btn'+i){ cnt=i; } // cnt값 받아 옴
}
$('.gallery .link'+cnt).fadeIn('slow'); // 자신만 갤러리 킴
// 버튼 전부 끔
$('.mbutton').css('background','#00f');
$('.mbutton').css('width','16');
// 나만 버튼 킴
$('.btn'+cnt).css('background','#f00');
$('.btn'+cnt).css('width','30');
if(cnt == imageCount){ cnt=0; } //카운트 초기화 (setinterval 때문에 초기화 필요)
timeonoff= setInterval( moveg , 4000); //타이머의 부활!
// stop버튼 누른 후 클릭 시 필요
if(onoff == false){ // 중지상태
onoff = true; // 동작으로 변경
$('.ps').css('background','url(images/stop.png)');
}
});
// stop/play 버튼 클릭시 타이머 동작/중지
$('.ps').click(function(){
if(onoff == true){ // 동작중일 때
clearInterval(timeonoff); // 타이머 중지
$(this).css('background','url(images/play.png)');
onoff = false;
} else { // 중지중일 때
timeonoff = setInterval( moveg , 4000); //타이머의 부활!
$(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_fade-ps2</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 class="link1">
<a href="#">
<img src="images/a1.jpg" alt=''>
<span>Slogan Text1</span>
</a>
</li>
<li class="link2">
<a href="#"><img src="images/a2.jpg" alt=''>
<span>Slogan Text2</span>
</a>
</li>
<li class="link3">
<a href="#">
<img src="images/a3.jpg" alt=''>
<span>Slogan Text3</span>
</a>
</li>
<li class="link4">
<a href="#">
<img src="images/a4.jpg" alt=''>
<span>Slogan Text4</span>
</a>
</li>
<li class="link5">
<a href="#">
<img src="images/a5.jpg" alt=''>
<span>Slogan Text5</span>
</a>
</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 main slide fade ps lr (0) | 2021.12.13 |
|---|---|
| jQuery main slide (0) | 2021.12.13 |
| jQuery slide scroll, quicktop, tab (0) | 2021.12.10 |
| jQuery 네비게이션 Full drop-down + 스크롤 반응 배경 (0) | 2021.12.09 |
| jQuery 네비게이션 full dropdown_navi (0) | 2021.12.09 |
