jQuery 아코디언 갤러리 (컬랩스)
2021. 12. 15. 11:37ㆍStudy/jQuery
JS
$(document).ready(function(){
/* 자동기능....
var timeonoff;
var imageCount=4;
var cnt=1;
function move_gallery(){
cnt++;
if(cnt==1){
$('.eventSlideMenu .img02').animate({left:350},450).clearQueue();
$('.eventSlideMenu .img03').animate({left:400},450).clearQueue();
$('.eventSlideMenu .img04').animate({left:450},450).clearQueue();
}else if(cnt==2){
$('.eventSlideMenu .img02').animate({left:50},450).clearQueue();
$('.eventSlideMenu .img03').animate({left:400},450).clearQueue();
$('.eventSlideMenu .img04').animate({left:450},450).clearQueue();
}else if(cnt==3){
$('.eventSlideMenu .img02').animate({left:50},450).clearQueue();
$('.eventSlideMenu .img03').animate({left:100},450).clearQueue();
$('.eventSlideMenu .img04').animate({left:450},450).clearQueue();
}else if(cnt==4){
$('.eventSlideMenu .img02').animate({left:50},450).clearQueue();
$('.eventSlideMenu .img03').animate({left:100},450).clearQueue();
$('.eventSlideMenu .img04').animate({left:150},450).clearQueue();
}
if(cnt==imageCount)cnt=0;
}
timeonoff= setInterval(move_gallery, 4000);
*/
var left1 = [0, 0]; // 좌측 값, 우측 값
var left2 = [50, 350];
var left3 = [100, 400];
var left4 = [150, 450];
$('.eventSlideMenu ul li span').mouseenter(function(event){
var $target=$(event.target);
var myturn = $(this).index('.eventSlideMenu ul li span');
var mynum = 0;
for(var i=0; i<4; i++){
if(i <= myturn){ // i=0 , myturn 2
mynum = eval('left'+ (i+1) +'[0]');
$('.eventSlideMenu li:eq('+i+')').animate({left: mynum},450).clearQueue();
console.log(mynum);
} else {
mynum = eval('left'+ (i+1) +'[1]');
$('.eventSlideMenu li:eq('+ i +')').animate({left: mynum},450).clearQueue();
console.log(mynum);
}
}
// clearInterval(timeonoff);
// if($target.is('.eventSlideMenu .buttonMenu01')){
// $('.eventSlideMenu .img02').animate({left: left2[1]},450).clearQueue();
// $('.eventSlideMenu .img03').animate({left: left3[1]},450).clearQueue();
// $('.eventSlideMenu .img04').animate({left: left4[1]},450).clearQueue();
// cnt=1;
// }else if($target.is('.buttonMenu02')){
// $('.eventSlideMenu .img02').animate({left: left2[0]},450).clearQueue();
// $('.eventSlideMenu .img03').animate({left: left3[1]},450).clearQueue();
// $('.eventSlideMenu .img04').animate({left: left4[1]},450).clearQueue();
// cnt=2;
// }else if($target.is('.buttonMenu03')){
// $('.eventSlideMenu .img02').animate({left: left2[0]},450).clearQueue();
// $('.eventSlideMenu .img03').animate({left: left3[0]},450).clearQueue();
// $('.eventSlideMenu .img04').animate({left: left4[1]},450).clearQueue();
// cnt=3;
// }else if($target.is('.buttonMenu04')){
// $('.eventSlideMenu .img02').animate({left: left2[0]},450).clearQueue();
// $('.eventSlideMenu .img03').animate({left: left3[0]},450).clearQueue();
// $('.eventSlideMenu .img04').animate({left: left4[0]},450).clearQueue();
// cnt=0;
// }
// timeonoff= setInterval(move_gallery, 4000); //부활~~
});
});
HTML
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
*{margin: 0; padding: 0;}
body{font-size:16px; line-height: 1.6; color:#333; margin:30px;}
ul, li{list-style:none;}
a, img{border:0; text-align:top;}
.eventSlideMenu{position:relative; width:500px; height:167px; overflow:hidden; border:2px solid #999;}
.eventSlideMenu li{position:absolute; top:0; width:350px;height:167px;}
.eventSlideMenu .img01{left:0; z-index:10; }
.eventSlideMenu .img02{left:350px; z-index:20;}
.eventSlideMenu .img03{left:400px; z-index:30;}
.eventSlideMenu .img04{left:450px; z-index:40;}
.eventSlideMenu ul li a{display: block;}
.eventSlideMenu ul li span{display:block; position:relative; left:0px; top:-174px; width:50px; height:167px; cursor:pointer; background:#FFF; opacity:0;}
.eventSlideMenu li{border-left:1px solid #999;}
</style>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/accordion.js"></script>
</head>
<body>
<div class="eventSlideMenu">
<ul>
<li class="img01 eventMenu"><a href="http://naver.com"><img src="images/img1.jpg" alt="아이스그린티:시원한 탄산수~" /></a><span class="buttonMenu01"></span></li>
<li class="img02 eventMenu"><a href="http://nate.com"><img src="images/img2.jpg" alt="아이스그린티:시원한 탄산수~" /></a><span class="buttonMenu02"></span></li>
<li class="img03 eventMenu"><a href="#"><img src="images/img3.jpg" alt="아이스그린티:시원한 탄산수~" /></a><span class="buttonMenu03"></span></li>
<li class="img04 eventMenu"><a href="#"><img src="images/img4.jpg" alt="아이스그린티:시원한 탄산수~" /></a><span class="buttonMenu04"></span></li>
</ul>
</div>
</body>
</html>
'Study > jQuery' 카테고리의 다른 글
| jQuery 문자열을 변수로 변환하는 함수 eval (0) | 2021.12.15 |
|---|---|
| jQuery silde left (partenr banner) (0) | 2021.12.15 |
| jQuery 아코디언메뉴 (0) | 2021.12.15 |
| jQuery 순차적 접근 (0) | 2021.12.15 |
| jQuery 순차적 접근, 자동롤링 (0) | 2021.12.14 |
