jQuery에서 슬라이드 쇼 만들기 (이미지 아님)
-
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 + ')')
제휴하지 않습니다 StackOverflow