jQuery에서 슬라이드 쇼 만들기 (이미지 아님)

StackOverflow https://stackoverflow.com/questions/1404175

  •  05-07-2019
  •  | 
  •  

문제

나는 몇 가지가있다 div 하나의 컨테이너에 포함 된 요소 div, 그리고 나는 그들을 통해 한 번에 하나만 표시하고 특정 시간 초과 후에 애니메이션을 사용하여 현재 보이는 div를 왼쪽으로 슬라이드하고 오른쪽에서 다음 div에서 슬라이드합니다.

내 html은 다음과 같이 보입니다.

<div id="topMaps" style="height: 225px; overflow: hidden;">
  <div>First slide - some content here</div>
  <div>Second slide - some content here</div>
  <div>... slide - some content here</div>
  <div>n'th slide - some content here</div>
</div>

다음 스크립트를 사용하고 있습니다.

var currentSlide = 1;
var numSlides = -1;
var slideSpeed = 1000;
var timePerSlide = 3500;

function nextSlide() {
    $('#topMaps div:nth-child(' + currentSlide + ')').hide("slide", { direction: "left" }, slideSpeed);
    currentSlide += 1;
    if (currentSlide >= numSlides)
        currentSlide = 1;
    $('#topMaps div:nth-child(' + currentSlide + ')').show("slide", { direction: "left" }, slideSpeed);

    setTimeout(nextSlide, timePerSlide);
}

$(document).ready(function() {
    numSlides = $('#topMaps div').length;
    setTimeout(nextSlide, timePerSlide);
});

그러나 그것은 작동하지 않습니다. 때 nextSlide Firefox는 다음 오류를보고합니다.

o.easing[this.options.easing || (o.easing.swing ? "swing" : "linear")] is not a function
http://localhost/templates/front/default/js/jquery.js
Line 19

그리고 내가 추가 할 때 $('#topMaps div:nth-child(' + currentSlide + ')') Firebug의 시계 패널에서 10 가지 요소 모음을 반환합니까? 무슨 일이 일어나고 있는지 잘 모르겠습니다.

누군가 나를 도울 수 있을까요?

편집하다 선택기의 문제를 알아 냈는데 사용해야했습니다. $('#topMaps>div:nth-child(' + currentSlide + ')') (주목하십시오 >). 그래도 여전히 작동하지 않습니다.

도움이 되었습니까?

해결책

당신이 원했던 대답은 아니지만, 당신은 사이클 플러그인?

다른 팁

각 DIV에 대한 ID를 설정하고 NexTslide () JS 함수에서 호출하고 CurrentsLide 변수를 테스트하고 다음 DIV를 선택하는 것이 좋지 않지만 좋은 프로그래밍이 아닌 다음 DIV를 선택하는 것이 좋습니다. $ ( '#topmaps div : nth-Child (' + currentslide + ')')

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top