이미지 슬라이더에 배열을 더 추가하십시오.

Question

저는 프로젝트를위한 커스텀 jQuery 슬라이더를 만들고 있습니다. 이미지를 업데이트해야하는 상당히 기본적인 것. 하지만 몇 가지 문제가 있습니다.

1 - 내가 배열

2에서 두 개 이상의 이미지를 추가하는 방법을 잘 모르겠습니다 - 전환은 여기

홀수 비트 코드 + jsfiddle

 #background { 
     width: 960px; 
     height: 480px; 
     background: transparent url(http://i.imgur.com/pSo3Nmg.jpg) no-repeat top center; 
     background-size: cover; 
     display: block; 
     } 

var image = $('#background'); 
       image.fadeOut(3000, function() { 
        image.css("background", "url('http://i.imgur.com/So7hhTG.png')"); 
        image.css("background-size", "cover"); 
        image.fadeIn(3000); 
      }); 

http://jsfiddle.net/SxN8g/

것 같다

내가하려는 것은 fadeIn/fadeOut을 통해 2 분마다 이미지가 변경됩니다.

Answer 1

는 다음을 시도 할 수 있습니다 : JSFiddle

var images = [ 
        'http://i.imgur.com/So7hhTG.png', 
        'http://i.imgur.com/pSo3Nmg.jpg' 
       ]; 
    var cnt = images.length; 

    $(function() { 
     setInterval(Slider, 3000); 
    }); 

    function Slider() { 
     $('#imageSlide').fadeOut("slow", function() { 
      $(this).attr('src', images[(images.length++) % cnt]).fadeIn("slow"); 
     }); 
    } 

HTML :

<img id="imageSlide" alt="" src="" /> 

출처 : 작동 깔끔한 Create a Simple Image Slide Show using jQuery by Suprotim Agarwal