2012-08-28 5 views
3

제발 jquery를 사용하여 이미지를 슬라이드하는 데 도움이 필요합니다. 지금은 마지막 요소까지 슬라이드하고 첫 번째 div로 다시 돌진하고 다시 아름답게 시작하지, 나는 그 일을하기 위해 함수를 호출해야하지만 나는 계속 실수를 저지르고 있어야한다는 것을 압니다.jquery 슬라이드 앞뒤 슬라이드 또는 슬라이드

if(currentPosition == numberOfSlides - 1) { 
    currentPosition = 0; 
} else { 
    currentPosition++; 
} 

당신은 매우 끝으로 첫 번째 슬라이드로 이동 (동시에 컨테이너의 위치를 ​​조정해야합니다 사전에 감사합니다,이

$(document).ready(function() { 
    var currentPosition = 0; 
    var slideWidth = 190; 
    var slides = $('.slider_move'); 
    var numberOfSlides = slides.length; 
    var slideShowInterval; 
    var speed = 5000; 

    slideShowInterval = setInterval(changePosition, speed);     
    slides.wrapAll('<div id="slidesHolder"></div>')     
    slides.css({ 'float' : 'left' });     
    $('#slidesHolder').css('width', slideWidth * numberOfSlides); 

    function changePosition() { 
     if(currentPosition == numberOfSlides - 1) { 
      currentPosition = 0; 
     } else { 
      currentPosition++; 
     } 
     moveSlide(); 
    }     
    function moveSlide() { 
      $('#slidesHolder') 
       .animate({'marginLeft' : slideWidth*(-currentPosition)}); 
    } 
});​ 

답변

2

대신 아래에있는 내 jQuery 코드입니다) :

if (currentPosition > 0) { 
    $('#slidesHolder').css('marginLeft',0) 
     .children().first().appendTo('#slidesHolder'); 
} else { 
    currentPosition += 1; 
} 

http://jsfiddle.net/mblase75/qatry/

또는 전체를 최적화하기 위해 조명 TLE 더, 당신은 currentPosition 변수와 moveSlide 하위 기능을 제거 할 수 있으며, 단지 .animate 방법에 콜백을 사용

function changePosition() { 
    $('#slidesHolder').animate({ 
     'marginLeft': 0-slideWidth 
    }, function() { 
     $('#slidesHolder').css('marginLeft', 0) 
      .children().first().appendTo('#slidesHolder'); 
    }); 
} 

http://jsfiddle.net/mblase75/8vaCg/

+0

가 작동하지 않습니다 - 첫 번째 슬라이드는 항상있을 것입니다 같은 것을 제거한 다음 추가해야합니다. – Chris

+0

Blazemonger가 여전히 작동하지 않습니다. 여기가 http://greencredit.webstyle.ru/입니다. 바닥 글 근처에서 멈추지 않고 끝까지 움직이거나 돌아 가야합니다. –

+0

@Blazemonger 감사합니다. , 그것을 작동, 추가 사용하는 방법을 알고, 더 연습을해야한다! 좋은 하루 되세요! –

관련 문제