[JS] 롤링 갤러리 구현
jQuery를 이용해서 롤링 갤러리를 한번 만들어 봤다. 이미지가 3개로 고정되어 있어서 가능했지 그렇지 않았으면
내 실력으로 구현을 할 수가 있었을지 자신은 없다. 갤러리는 아래 이미지와 같다. 세로 1~3번을 클릭하면 그에 따라
이미지 보여지고 클릭했던 세로 바는 위치 이동 후 사라지는 것인데.. 쉽게 생각했다 된통 당했다. 실력이 없어서..
<script type=”text/javascript”>
var current_idx = 0;
var old_idx = -1;
$(function() {
$(‘div#intro_indicator1’).addClass(“indicator_right”);
var ImageRotate = setInterval(“IntroImageRotate()”, 3500);
$(‘div.indicator_left’).click(function() {
current_idx = $(‘div.indicator_left’).index($(this));
old_idx = current_idx – 1;
IntroImageRotate();
});
$(‘div#MainImgArea’).hover(
function() {
clearInterval(ImageRotate);
},
function() {
ImageRotate = setInterval(“IntroImageRotate()”, 3500);
}
);
});
function IntroImageRotate()
{
current_idx = (old_idx + 1) % 3;
if(!$(‘div.indicator_left:eq(‘ + current_idx + ‘)’).is(“.indicator_right”)) {
if(current_idx == 1) {
$(‘div#intro_indicator1’).addClass(“indicator_right”).css(“left”, “571px”).show();
$(‘div#intro_indicator2’).addClass(“indicator_right”).css(“left”, “541px”).hide();
$(‘div#intro_indicator3’).css(“left”, “0px”).show();
} else if(current_idx == 2) {
$(‘div#intro_indicator1’).addClass(“indicator_right”).css(“left”, “571px”).show();
$(‘div#intro_indicator2’).addClass(“indicator_right”).css(“left”, “541px”).show();
$(‘div#intro_indicator3’).css(“left”, “0px”).hide();
} else {
$(‘div#intro_indicator1’).addClass(“indicator_right”).css(“left”, “571px”).hide();
$(‘div#intro_indicator2’).css(“left”, “30px”).show();
$(‘div#intro_indicator3’).css(“left”, “0px”).show();
}
} else {
if(current_idx == 1) {
$(‘div#intro_indicator1’).css(“left”, “571px”).show();
$(‘div#intro_indicator2’).css(“left”, “541px”).hide();
$(‘div#intro_indicator3’).removeClass(“indicator_right”).css(“left”, “0px”).show();
} else if(current_idx == 2) {
$(‘div#intro_indicator1’).css(“left”, “571px”).show();
$(‘div#intro_indicator2’).css(“left”, “541px”).show();
$(‘div#intro_indicator3’).removeClass(“indicator_right”).css(“left”, “0px”).hide();
} else {
$(‘div#intro_indicator1’).css(“left”, “571px”).hide();
$(‘div#intro_indicator2’).removeClass(“indicator_right”).css(“left”, “30px”).show();
$(‘div#intro_indicator3’).removeClass(“indicator_right”).css(“left”, “0px”).show();
}
}
$(‘div.intro_image’).hide();
$(‘div.intro_image:eq(‘ + current_idx + ‘)’).show();
old_idx = current_idx;
}
</script>
3.5초마다 이미지 롤링되고 마우스 오버 시에는 롤링이 멈추는 구조이다. jQuery를 접한 지 얼마되지 않아 이런
방법으로 밖에 구현을 못하지만 나중에 실력이 좀 더 쌓이면 심플하면서도 간결하게 구현할 수 있지 않을까 생각만
하고 있다. 그 때까지 노력을 많이 해야할텐데.. 그게 과연 쉬울지 모르겠다. 이걸 함수로 만들면 참 좋을텐데.. ^^;
방법으로 밖에 구현을 못하지만 나중에 실력이 좀 더 쌓이면 심플하면서도 간결하게 구현할 수 있지 않을까 생각만
하고 있다. 그 때까지 노력을 많이 해야할텐데.. 그게 과연 쉬울지 모르겠다. 이걸 함수로 만들면 참 좋을텐데.. ^^;