jQuery 슬라이딩 헤더 및 이미지 변경

Question

헤더를 오른쪽에서 왼쪽으로 움직이고 왼쪽에서 오른쪽으로 움직이는 함수를 만들려고합니다.

당신은 여기의 시작을 볼 수 있습니다

페이지가로드가 오른쪽에 이미지를 공개, 다시 다음 왼쪽에 이미지를 공개, 오른쪽으로 헤더를 밀어 시작하고, http://opportunityfinance.net/Test/financeforum2013/. 나는 이것을 계속해서 계속해야 할 필요가있다. 그리고 오른쪽과 왼쪽의 이미지를 변경할 때마다. 사이드 이미지를 위해 순환시키고 싶은 5 개의 이미지가 있습니다. 중소기업 금융 포럼 이미지는 변화하는 두 개의 측면 이미지 사이에서 일정하게 유지되어야하며 오른쪽에서 왼쪽으로 이동 한 다음 왼쪽에서 오른쪽으로 이동해야합니다.

여기까지 제가 사용하고있는 코드입니다. 그러나 jQuery 지연 10 초가 작동하지 않는 것, 그리고 애니메이션이 완료되면 다시 함수를 호출하는 방법을 알아낼 수 없습니다.

jQuery를 :

$(document).ready(function(){ 
    $(".header_right").html('<img src="images/1.jpg" alt="OFN" />'); 
    $(".header_left").html('<img src="images/2.jpg" alt="OFN" style="max-height: ' + $("div.header").height() + 'px' + ';" />'); 
    slide(); 
}); 

function slide(slideVar) 
{ 
    slideVar = !slideVar ? 2 : slideVar; 
    slideVar = slideVar > 5 ? 1 : slideVar; 

    $(function() { 
     var mrgLeft = parseInt($(".header_right").css('marginLeft'),10) == 0 ? $(".header_right").outerWidth() : 0; 
     $(".header_left").html('<img src="images/' + slideVar + '.jpg" alt="OFN" style="max-height: ' + $("div.header").height() + 'px' + ';" />'); 

     $("img.hImage").delay("10000").animate({ marginLeft: mrgLeft + 'px' }, { duration: 3000, queue: false }); 
     $(".header_left").delay("10000").animate({ marginLeft: mrgLeft + 'px'}, { duration: 3000, queue: false }); 
     $(".header_right").delay("10000").animate({ 'right': '-' + mrgLeft + 'px'}, { duration: 3000, queue: false }); 
    }); 
    slideVar++; 
} 

HTML 설정 :

는 CSS

<div class="header"> 
    <img class="hImage" src="images/header.jpg" alt="Small Business Finance Forum" /> 
    <div class="header_right"></div> 
    <div class="header_left"></div> 
</div> 

:

.hImage 
{ 
    width: 64%; 
} 

div.header_right 
{ 
    position: absolute; 
    display: block; 
    right: -10px; 
    top: 0px; 
    width: 35.5%; 
} 

div.header_left 
{ 
    position: absolute; 
    display: block; 
    left: -35.5%; 
    top: 0px; 
    width: 35.5%; 
} 

div.header 
{ 
    box-sizing: border-box; 
    background-color: #00457E !important; 
    width: 100%; 
} 

는 기본적으로, 난 그냥 주 "header.jpg"이미지를 슬라이드 할 왼쪽과 오른쪽 , 매번 왼쪽과 오른쪽 이미지를 5.jpg까지 변경합니다. 1.jpg에서 5.jpg로 반복됩니다. 그러나 주로 지연 문제를 해결하는 방법 (동작하지 않기 때문에)과 애니메이션이 완료 될 때 slide() 함수 내에서 루프를 만드는 방법을 알아낼 수 없습니다.

누군가가 나를 시작할 수 있도록 도와 줄 수 있습니까?

고마워 :) 난 당신이 시작점으로 사용하는 것 같아서 조금 이미지 슬라이더를 만들었습니다

Answer 1

. ID가 #container 인 고정 너비의 컨테이너를 사용합니다. 그 안에는 세 가지 다른 이미지 용 컨테이너가 있습니다. 당신은 당신의 필요에 따라 CSS의 모든 이들의 너비를 바꿀 수 있습니다.

애니메이션은 완전한 기능을 사용하여 swapImg 함수를 호출합니다. 그러면 이미지 컨테이너가 방금 이동 한 방향에 따라 왼쪽 또는 오른쪽 이미지가 서로 바뀝니다.

스왑 된 이미지는 image 어레이에서 가져옵니다. 대체 이미지는 대체면에 표시됩니다. 따라서 두 번째 이미지가 오른쪽에 표시됩니다. 즉, 배열에서 짝수 개의 이미지를 사용하거나 스크립트를 변경해야합니다. 사람이 어떤 잔인한 애니메이션 당신이 ** 크기 조정에 먼저 요소의 위치를 ​​고정하는 것이 루프를 만들기 위해 시도하기 전에

여기 **, 바이올린

http://jsfiddle.net/Rgh2B/5/