배경 슬라이드 쇼 (자바 스크립트) 페이드 전환 효과

javascript 배경 슬라이드 쇼에 페이드 효과를 적용하려고합니다. 가치를 바꿀 때 JS는 그것을 무시했습니다. 나는 fadeIn과 fadeOut를 시도했다. 이 코드의 문제점은 무엇입니까?배경 슬라이드 쇼 (자바 스크립트) 페이드 전환 효과

var bgimages=new Array() 
bgimages[0]="tenis.jpg" 
bgimages[1]="rtrr.jpg" 
bgimages[2]="tenis.jpg" 

//preload images 
var pathToImg=new Array() 
for (i=0;i<bgimages.length;i++) { 
    pathToImg[i]=new Image() 
    pathToImg[i].src=bgimages[i] 
} 
var inc=-1 

function bgSlide() { 
    if (inc<bgimages.length-1) 
     inc++ 
    else 
     inc=0 

    document.body.background=pathToImg[inc].src 
} 

if (document.all||document.getElementById) 
    window.onload=new Function('bgSlide(); setInterval("bgSlide()",3000),fade(2000)')

출처

2014-09-09 user2097021

이 웹 페이지에서 달성하려는 것에 대한 실례를 찾을 수 있습니다. http://css3.bradshawenterprises.com/cfimg/ – Glogo

감사하지만 내 질문에는 답이되지 않습니다. 자바 스크립트, css3 사용하고 싶습니다. Css3에 잘못된 브라우저 지원이 있습니다. – user2097021

@ user2097021 녹색 확인 주셔서 감사합니다! 귀찮게하는 것이 싫지만, 15 점 이상을 가지고있는 한 내 대답에도 투표 할 수 있습니다. 올바른 프로토콜을 보려면이 링크를 참조하십시오. stackoverflow.com/help/someone-answers - – totallytotallyamazing

배경 이미지를 희미하게 만들 수 없습니다. <img> 태그로 이미지를 색칠 할 수 있습니다.

여기 내 jsFiddle은 DEMO입니다. 여기

은 (JQuery와, CSS 및 HTML 포함) 몇 가지 예제 코드입니다 : "당신은 배경 이미지를 퇴색 수 없습니다"당신이-페이드 인과 페이드 아웃 할 수있는 사실이지만

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Untitled Document</title> 
<style> 
img{ 
    position:absolute; 
    top:0; 
    display:none; 
    width:auto; 
    height:100%; 
} 
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
function fader() { 
    $("img").first().appendTo('#wrap').fadeOut(3000); 
    $("img").first().fadeIn(3000);  
    setTimeout(fader, 4200); 
} 
</script> 
</head> 
<body onLoad="fader();"> 
<div id="wrap"> 
<img src="http://stats.hashweb.org/static/img/jsfiddle-logo.png"> 
<img src="http://startbootstrap.com/templates/freelancer/img/profile.png"> 
<img src="http://www.silvercoinstoday.com//images/Silver-Element-Atomic-Structure.jpg"> 
</div> 
</body> 
</html>

출처

2014-09-10 01:08:42 totallytotallyamazing

배경 URL이 사라질 이미지입니다.

위의 데모는 이미지가 완전히 녹아 없어지는 곳에서 빈 화면을 남기지 않고 원하는 결과를 얻지 못합니다.

출처

2015-04-30 20:16:20

배경 슬라이드 쇼 (자바 스크립트) 페이드 전환 효과

답변

관련 문제