JQuery와 사용자 정의 슬라이더 무한 루프

나는 그림이 있지만, 단 한 번, 자동으로 슬라이딩되는 곳이 튜토리얼 JQuery와 사용자 정의 슬라이더 무한 루프

http://css-plus.com/2010/09/create-your-own-jquery-image-slider/

를 사용하여 JQuery와 슬라이더를했다. 무한 루프에서 어떻게 그들을 동그라미로 만들 수 있습니까?

온라인 예 :

난 정말 당신의 도움을 주셔서 감사합니다 것 www.vytvarkajablonec.jecool.net/ati

!

2013-08-01 Jiří Oláh

사용하여 setInterval을 (및이를 참조 반복 함수를 호출 :

var oGallary = $('#gallery'); var gallarWidth = oGallary.width(); if(oGalary.position().left > stopPosition && oGallary.is(":animated") == false) { oGallary.animate({left : "-=" + imageWidth + "px"}); } else if (oGalary.position().left <= stopPosition && oGallary.is(":animated") == false) { oGallary.animate({left : "+=" + gallaryWidht + "px"}) // Get full length of the entire gallary }

–

답변 제공 http://stackoverflow.com/questions/2060140/jquery-rotating-banner-question/2060490#2060490 – Ruben

gallary의 끝 부분에있는 경우 초기 위치로 되돌아 가도록합니다.)

$(document).ready(function() { 

    // Gallery 
    if (jQuery("#gallery").length) { 

     // Declare variables 
     var totalImages = jQuery("#gallery > li").length, 
      imageWidth = jQuery("#gallery > li:first").outerWidth(true), 
      totalWidth = imageWidth * totalImages, 
      visibleImages = Math.round(jQuery("#gallery-wrap").width()/imageWidth), 
      visibleWidth = visibleImages * imageWidth, 
      stopPosition = (visibleWidth - totalWidth); 

     jQuery("#gallery").width(totalWidth); 

     jQuery("#gallery-prev").click(function() { 
      if (jQuery("#gallery").position().left < 0 && !jQuery("#gallery").is(":animated")) { 
       jQuery("#gallery").animate({ 
        left: "+=" + imageWidth + "px" 
       }); 
      } 

      if (jQuery("#gallery").position().left === 0) { 
       jQuery("#gallery > li:last").prependTo($("#gallery")); 
      } 

      return false; 
     }); 

     jQuery("#gallery-next").click(function() { 
      if (jQuery("#gallery").position().left > stopPosition && !jQuery("#gallery").is(":animated")) { 
       jQuery("#gallery").animate({ 
        left: "-=" + imageWidth + "px" 
       }); 
      } 

      if (jQuery("#gallery").position().left === stopPosition) { 
       jQuery("#gallery > li:first").appendTo($("#gallery")); 
      } 

      return false; 
     }); 
    } 

});

출처

2013-08-01 14:57:19

이에 대한 튜토리얼에서 JS 코드를 교체 http://www.w3schools.com/jsref/met_win_setinterval을. asp

출처

2013-08-01 15:06:37 Sbml

이제 마지막 슬라이드에 갇혀 있습니다. (여기 : http://www.vytvarkajablonec.jecool.net/ ati /). 나는 마지막 슬라이드가 도착하면, 다음 슬라이드가 첫 번째 슬라이드가되어야합니다. (슬라이드 1 -> 슬라이드 2 -> 슬라이드 3 -> 슬라이드 1 -> 슬라이드 2 등 ....) –

왜 아이템을 다시 추가합니까? 이렇게하면 페이지가 더 많은 메모리를 사용하게됩니다. 내 답변에서 보여 주듯이, 당신은 결국 "무한 루프에서 동그라미가되게"할 수 있습니다. –

@ JiříOláh 튜토리얼에서 모든 코드를 변경 했습니까? 내 예제를 보라 http://jsfiddle.net/sbml/NWntU/ – Sbml

JQuery와 사용자 정의 슬라이더 무한 루프

답변

관련 문제