이전 버튼을 클릭 한 후 빈 div가 나타나지 않게하는 방법은 무엇입니까?

debugcn 에 게시 Dev

존 본

그래서 저는 이전 및 다음 버튼으로 매우 간단한 슬라이드 쇼를 코딩했습니다.

그러나 이전 버튼을 누르면 슬라이더가 작동하지만 빈 div로 이동합니다.

참고 : 슬라이더를로드하고 왼쪽 회색 버튼을 누른 다음 슬라이드 쇼를 계속하십시오 ... 빈 div가 있습니다.

이 문제를 어떻게 해결하고 문제의 원인은 무엇입니까?

JS 바이올린 : https://jsfiddle.net/z93tyrtx/

 $("#slider > div:gt(0)").hide();

    // fade out current slide (first), fade in next slide and move first slide to end
    var nextSlide = function () {
        $("#slider > div:first")
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo("#slider");
    }

    var nextSlideTimer = setInterval(nextSlide, 5000);

    // fade out current slide (first) and move last slide to top and fade in
    $("#prev-button").click(function () {
        clearInterval(nextSlideTimer);

        $("#slider > div:first")
        .fadeOut(1000);
        $("#slider > div:last")
        .fadeIn(1000)
        .prependTo("#slider");

        nextSlideTimer = setInterval(nextSlide, 5000)
        setTimeout(nextSlideTimer, 5000)
    });

    $("#next-button").click(function () {
        clearInterval(nextSlideTimer);

        $("#slider > div:first")
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo("#slider");

        nextSlideTimer = setInterval(nextSlide, 5000)
        setTimeout(nextSlideTimer, 5000)
    });

샘

문제는 .prependTo이전 버튼 클릭에서 실제로 a태그 앞에 마지막 div를 삽입하지만 그 뒤에 삽입해야한다는 것입니다.

그냥 교체

.prependTo("#slider");

에

.insertAfter("#slider > a#next-button");

이 바이올린 확인

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-2

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

이전 버튼을 클릭 한 후 빈 div가 나타나지 않게하는 방법은 무엇입니까?

이전 버튼을 클릭 한 후 빈 div가 나타나지 않게하는 방법은 무엇입니까?

이전 버튼을 클릭 한 후 빈 div가 나타나지 않게하는 방법은 무엇입니까?

다른 버튼을 클릭 한 후 버튼 스타일을 지정하는 방법은 무엇입니까?

버튼을 클릭 한 후 캔버스와 버튼 (및 기능)을 지우는 방법은 무엇입니까?

버튼을 클릭 한 후 페이지가 어두워 질 때까지 기다리는 방법은 무엇입니까?

NSIS : 다음 / 뒤로 버튼을 클릭 한 후 이전 대화 상자의 입력 값을 유지하는 방법은 무엇입니까?

버튼을 클릭 한 후 캔버스에 요소를 하나 더 추가하는 방법은 무엇입니까?

버튼을 클릭 한 후 requestAnimationFrame이 캔버스를 한 번 이상 다시 그리는 것을 방지하는 방법은 무엇입니까?

제출 버튼을 클릭 한 후 페이지에서 라디오 버튼이 선택되었는지 확인하는 방법은 무엇입니까?

각 버튼 클릭 이벤트 후 새 항목을 추가하고 일반 목록에 이전 항목을 유지하는 방법은 무엇입니까?

PHP에서 확인란을 클릭 한 후 보이지 않는 버튼을 표시하는 방법은 무엇입니까?

버튼을 클릭했을 때이 경고 상자가 나타나지 않는 이유는 무엇입니까?

HTML 버튼을 클릭 한 후 비활성화하는 가장 빠른 방법은 무엇입니까?

setMyLocationEnabled 버튼을 클릭 한 후 GoogleMap에 직접 마커를 추가하는 방법은 무엇입니까?

android-realease 후에도 버튼이 "클릭 한 모양"으로 유지되는 방법은 무엇입니까?

android-realease 후에도 버튼이 "클릭 한 모양"으로 유지되는 방법은 무엇입니까?

사용자가 AlertDialog 확인 버튼을 클릭 한 후 다음 활동으로 이동하는 방법은 무엇입니까?

onclick 이벤트가있는 div의 버튼-버튼을 클릭 할 때 둘 중 하나만 트리거하는 방법은 무엇입니까?

사용자가 반응을 클릭 한 후 완전히 새로운 페이지로 리디렉션하는 방법은 무엇입니까?

클릭 한 버튼을 감지하는 방법은 무엇입니까? (Pynput)

버튼을 클릭 한 후 레이블과 라디오 버튼을 변경하는 방법은 무엇입니까?

하나의 버튼을 클릭하여 여러 가지 .innerhtml을 변경하는 방법은 무엇입니까?

PHP 게시물을 사용하여 이미지를 클릭 한 후 데이터를 전달하는 방법은 무엇입니까?

입력에서 클릭하거나 입력 한 후 마커를 추가하는 방법은 무엇입니까?

페이지의 버튼을 클릭 한 후에도 Selenium은 여전히 이전 페이지 상태를 사용합니다. 브라우저 / HTML 코드 상태로 업데이트하는 방법은 무엇입니까?

Matplotlib : 애니메이션을 시작하는 버튼을 클릭 한 후 애니메이션을 저장하는 방법은 무엇입니까?

PHP 연락처 포럼- "보내기"버튼을 클릭 한 후 URL을 변경하지 않는 방법은 무엇입니까?

내비게이터의 복귀 버튼을 클릭하지 않는 방법은 무엇입니까?

양식 제출을 제외하고 버튼을 클릭 한 후 jsp 페이지의 세션에 텍스트 상자 값을 추가하는 방법은 무엇입니까?

Svelte에서 버튼을 클릭 한 후 다시 입력에 집중하는 방법은 무엇입니까?