묻고답하기
jquery 이미지 자동 슬라이드에 관한 질문
2015.07.01 14:16
제가 XE에서 제공하는 기본레이아웃 (default)로 간단한 홈페이지를 제작했습니다. 홈페이지 대문의 이미지 슬라이드를 자동으로 변환시키고자 jquery 를 조금 수정해야 할 듯 합니다. 혹시 jquery 코드를 보시고 어느부분에 timer부분을 어떻게 넣어야 할지 아시는 분 계신지요...어제부터 이것때문에 하루종일 고생이네요 ㅜㅜ 그냥 jquery를 적용하기가 어려운게 이미 XE에서 주어진 레이아웃으로 조종하는 부분이라..제가 초보거든요..부탁좀 드려도 될까요?ㅜㅜ
jquery 비주얼슬라이드 부분입니다
// Visual Slide
var $visual = $('.visual');
var $visual_list = $visual.find('>.list');
var itemNum = $visual_list.find('>.item').length;
$visual_list.addClass('total'+itemNum);
var $last_item = $visual_list.find('>.item:last-child');
// Paragraph position
$visual.find('p').each(function(){
var $this = $(this);
$this.css('marginTop', Math.round(- $this.height()/2));
});
// Invalid href
$visual.find('a[href=""]').click(function(){return false});
// Item num
if(itemNum===1){
$visual.find('>button').remove();
} else if(itemNum===2){
$last_item.clone().prependTo($visual_list);
} else if(itemNum===3) {
$last_item.prependTo($visual_list);
}
// Prev
var $vpn = $('.visual, .visual>button');
$(window).load(function(){
$vpn.height($visual_list.find('>.item:eq(1)').height());
});
$visual.find('>.prev').click(function(){
$visual_list.animate({
left: '+=100%'
},400,function(){
var $last_item = $visual_list.find('>.item:last-child');
if(itemNum===3){
$last_item.prependTo($visual_list);
} else if(itemNum===2) {
$last_item.remove();
$visual_list.find('>.item:last-child').clone().prependTo($visual_list);
}
$visual_list.css('left','-100%');
$vpn.height($visual_list.find('>.item:eq(1)').height());
});
});
// Next
$visual.find('>.next').click(function(){
$visual_list.animate({
left: '-=100%'
}, 400, function(){
var $first_item = $visual_list.find('>.item:first-child');
if(itemNum===3){
$first_item.appendTo($visual_list);
} else if(itemNum===2) {
$first_item.remove();
$visual_list.find('>.item:first-child').clone().appendTo($visual_list);
}
$visual_list.css('left','-100%');
$vpn.height($visual_list.find('>.item:eq(1)').height());
});
});
});