오류 이미지 슬라이더 jQuery에서 애니메이션하기

Question

jquery에서 이미지 슬라이더를 처리하려고합니다. 아래 코드를 작성했습니다. src 속성을 변경하는 대신 이미지에 애니메이션을 적용하는 방법을 이해할 수 없습니다.

var tyInterval = setInterval(function() { 

    $('#first').attr('src', $('#images li').eq(0).children().attr('src')) 
    $('#head').html($('#images li').eq(0).children().attr('alt')) 

    var iHtml = $('#images li').eq(0).remove(); 
    $('#images').append(iHtml); 


}, 2000) 

https://jsfiddle.net/2tsfnauk/2/

그리고 빈 사업부가 표시됩니다 페이지의 초기로드에서

. 그 이유는 무엇입니까

Answer 1

다음 코드를 시도하면 어떻게됩니까? 당신의 demo

희망에 여기 업데이 트

$(document).ready(function() { 
    var carousel= $('#carousel'); 
    var head= $('#head'); 

    // variable will be used to loop on all images 
    var count = 1; 
    // find all images inside the ul with id = images 
    var max = $('#images img').length; 
    // make sure that the ul is hidden 
    $('#images').hide(); 
    var tyInterval = setInterval(function() { 
    var html = $($('#images li').eq(count).html()); 
    carousel.append(html); 
    head.text(html.attr('alt')) 
    count = count +1; 
    if(count==max) // when you reach the last image then reset the counter 
     count=0; 
    }, 2000) 
    // to load for the first time 
    var html = $('#images li').eq(0).html(); 
    carousel.append(html); 
    head.text(html.attr('alt') 
}) 

이것은 당신이

Answer 2

당신은 fadeOut() 및 fadeIn()를 사용해야합니다 도움이 될 것입니다. 이 코드에서처럼

:

$(function() { 
    $('#images li:gt(0)').hide(); 
    setInterval(function() { 
     $('#images > :first-child').fadeOut().next('li').fadeIn().end().appendTo('#images'); 
     $('#head').html($('#images li').eq(0).children().attr('alt')); 
    }, 3000); 
}); 

가 여기에 마크 업 및 CSS