jquery 페이딩 배경 이미지

저는 jQuery를 처음 접했지만 페이드 인/페이드 아웃하여 헤더에 3 또는 4 개의 배경 이미지를 반복하는 간단한 스크립트를 찾고 있습니다. 그것들은 투명한 png입니다. 그래서 이것을 시도한 많은 슬라이더가 작동하지 않습니다.jquery 페이딩 배경 이미지

아이디어가 있으십니까? 감사!

편집 :이 작업을 가지고,하지만 난 당신이 jQuery를주기 플러그인을 시도 해 봤나/페이드

setInterval(function() { 
    var source = $("#background-images img:first").attr("src"); 
    $('#background-images img:first').appendTo($('#background-images')); 
    $('#fading-images-container').css('background', 'url(' + source + ') no-repeat'); 
}, 5000);

출처

2011-10-05 user975876

을 페이드 아웃하는 방법을 알아낼 수 없습니다? 명확하게 투명 PNG로 작동하는지 확인하지는 않았지만 이전에는 절대로 실패하지 않았습니다. http://jquery.malsup.com/cycle/

출처

2011-10-05 03:27:03 madomausu

<!DOCTYPE html> 
<html> 
<head> 
<title>JQuery Cycle Plugin - Basic Demo</title> 

<style type="text/css"> 
.slideshow { height: 232px; width: 300px; margin: auto } 
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; } 
</style> 
<!-- include jQuery library --> 
<script type="text/javascript" src="jquery-1.6.4.js"></script> 
<!-- include Cycle plugin --> 
<script type="text/javascript" src="jquery.cycle.all.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $('.slideshow').cycle({ 
     fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc... 
     }); 
}); 
</script> 
</head> 
<body> 

    <div class="slideshow"> 
    <img src="IMG_2624.JPG" width="500" height="500" /> 
    <img src="IMG_2625.JPG" width="500" height="500" /> 
    <img src="IMG_2626.JPG" width="500" height="500" /> 
    <img src="IMG_2627.JPG" width="500" height="500" />  
</div> 
</body> 
</html>

나는이 링크 http://jquery.malsup.com/cycle/basic.html

에 참조 할 수

출처

2011-10-05 06:11:47

답변

관련 문제