에 오신 것을 환영합니다. jquery를 다루기 전에 javascript에 관한 튜토리얼을 찾아 볼 것을 권한다. 일부 자습서를 완료하면 더 나은 코드를 작성하고 문제가 발생할 때 질문의 틀을 잘 잡는 방법을 이해하는 데 도움이됩니다.
flatironimg, kaynesimg 및 chiassoimg와 같은 백그라운드 이미지 속성이있는 3 개의 CSS 클래스를 만든 것처럼 보입니다. 사이트에서 자동으로 slideimg div를 통해 세 개의 이미지를 순환 시키지만 사용자에게 수동으로 슬라이드를 넘기는 버튼을 제공하려고합니다. 사용자가 버튼을 클릭하면 더 이상 슬라이드 쇼가 자동으로 계속되지 않게됩니다.
나는 jquery 전문가가 아니지만 나는 당신을 도울 수있는 몇 가지 코드를 제공 할 수 있습니다. 아래에서 약간 설명 드리겠습니다. 리팩토링/고급 사용자의 도움을 환영합니다.
자바 스크립트 :
<script type="text/javascript">
var CLASS_ARRAY = ['flatironimg','kaynesimg','chiassoimg'];
var slideIndex = -1;
var automatic = true;
function nextSlide(){
$('#slideimg').fadeOut(600,function(){
slideIndex ++;
// Get the next highest item
if(slideIndex >= CLASS_ARRAY.length){
// If we run out of items, get the first one instead
slideIndex = 0;
}
$('#slideimg').attr('class',CLASS_ARRAY[slideIndex]);
// Swap out the old class attribute for the next one in our array
$('#slideimg').fadeIn(600),setTimeout('autoAdvance()',2000);
// Set the animation and have it autoadvance if appropriate
});
}
function autoAdvance(){
if(automatic) {
nextSlide();
}
}
$(document).ready(function() {
$('#flatironbtn').click(function(){
automatic = false;
nextSlide();
});
$('#resumebtn').click(function(){
automatic = true;
nextSlide();
});
nextSlide();
});
</script>
좋아. 우리가 여기서 뭐하고있는거야? 먼저 하드 코드 된 jquery 애니메이션 체인에서 이미지 시퀀스를 배열로 이동했습니다. 이렇게하면 슬라이드 쇼 순서를 쉽게 변경하고 레코딩하지 않고 새 스타일을 추가하고 코드를 읽을 수있게 도와줍니다. 또한 클래스 목록에있는 위치를 추적하는 인덱스와 자동으로 쇼를 진행해야하는지 여부를 추적하는 플래그를 설정했습니다.
var CLASS_ARRAY = ['flatironimg','kaynesimg','chiassoimg'];
var slideIndex = -1;
var automatic = true;
다음은 애니메이션을 처리하고 다음 슬라이드를로드하는 javascript 함수를 정의했습니다. 이 함수는 한 가지 일을하는 재사용 가능한 코드입니다. 이제 손으로 많은 애니메이션을 연결하는 대신 슬라이드를 애니메이션으로 만들 코드를 작성하고 autoAdvance 함수를 호출하여 계속해야하는지 확인합니다.
function nextSlide(){
$('#slideimg').fadeOut(600,function(){
slideIndex ++;
// Get the next highest item
if(slideIndex >= CLASS_ARRAY.length){
// If we run out of items, get the first one instead
slideIndex = 0;
}
$('#slideimg').attr('class',CLASS_ARRAY[slideIndex]);
// Swap out the old class attribute for the next one in our array
$('#slideimg').fadeIn(600),setTimeout('autoAdvance()',2000);
// Set the animation and have it autoadvance if appropriate
});
}
autoAdvance 기능은 매우 간단합니다. 자동 재생 모드인지 확인합니다. 위의 함수를 사용하면 다음 슬라이드를로드합니다. 코드의 형식을 청소 Chinmayee에
또한
$(document).ready(function() {
$('#flatironbtn').click(function(){
automatic = false;
// Once the user has clicked, auto-play will turn off
nextSlide();
});
$('#resumebtn').click(function(){
automatic = true;
// Give the user a resume button to pick up where they left off
nextSlide();
});
nextSlide();
});
, 감사 : 우리의 버튼을 사용하여 슬라이드 쇼를 제어하고 자동으로 첫 번째 애니메이션 킥오프하는
function autoAdvance(){
if(automatic) {
nextSlide();
}
}
마지막으로, 우리는 자바 스크립트를 설정 . 코드를 제대로 들여 쓰기하여 사람들이 무엇을하려하는지 명확하게 보여 주면 항상 도움이됩니다.