묻고답하기
자바스크립트가 크롬과 파이어폭스에서 먹통입니다..
2011.03.31 17:07
여기다 올려도 되는글인지 모르겠네요;;
너무 답답해서요..ㅠ
이미지가 자동으로 페이드인/아웃되는 효과를 자바스크립트로 구현하는데
익스플로러에서는 잘 되는데 크롬과 파이어폭스에서는
페이드효과없이 그냥 딱딱하게 넘어가버리네요 ㅠ
소스올려드려요..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
var slideShowSpeed = 2000
var crossFadeDuration = 3
var Pic = new Array()
Pic[0] = '1.jpg'
Pic[1] = '2.jpg'
Pic[2] = '3.jpg'
Pic[3] = '4.jpg'
var t
var j = 0
var p = Pic.length
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}
function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)"
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"
document.images.SlideShow.filters.blendTrans.Apply()
}
document.images.SlideShow.src = preLoad[j].src
if (document.all){
document.images.SlideShow.filters.blendTrans.Play()
}
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runSlideShow()', slideShowSpeed)
}
</script>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
overflow-y: hidden;
overflow-x: hidden;
}
-->
</style>
</head>
<BODY BGCOLOR="#FFFFFF" onLoad="runSlideShow()">
<table width="854" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="854"><img src="1.jpg" name="SlideShow" widht="854" height="392"></src></td>
</tr>
</table>
</body>
</html>
어떻게 해야할까요?
급해요 ㅠ 도움 부탁드립니다!!!! ㅠㅠ
