Question

我一直在为学校项目创建一个网站。除幻灯片外，我已经完成了一切。我已准备好javascript并且照片正在滑动，但我想知道是否有办法让照片淡入淡出，以及我应该放置＆＃34; fade＆＃34;代码中的功能？我确信这很简单，但无法弄清楚

我看了另一个例子，我认为它与不透明度功能有关，但不确定将它放在这个项目中的哪个位置？

以下是代码：

<script type="text/javascript">

var slideimages = new Array() // create new array to preload images
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "images/jambalaya.png" // set image object src property to an image's src, preloading that image in the process
slideimages[1] = new Image()
slideimages[1].src = "images/sucio_rice.png"
</script>
</head>

<script type="text/javascript">

var step=0

function slideit(){
 if (!document.images)
  return
 document.getElementById('slide').src = slideimages[step].src
 if (step<1)
  step++
 else
  step=0
 //call function "slideit()" every 2.5 seconds
 setTimeout("slideit()",2500)
}

slideit()

</script>
</head>

<body onLoad="MM_preloadImages('images/home_btn2.png')">

<div id="header">
    <h1>
        <img src="images/crab_logo_edit.png" width="652" height="140" alt="Singing Crab" />
    </h1>
</div>

<div id="content" class="wrap_home">

<h2>Arriba!</h2>

<div id="slideshow">
        <img src="images/jambalaya.png" id="slide" width="400" height="330" alt="Marsa Alam" />
</div>

    <p>There's always a fiesta at The Singing Crab—The best Cajun food Louisiana has to offer! Heavy on the spices, The Singing Crab has                                the absolute best that Cajun has to offer.</p>

<h2>You'll love it. We just guarantee.</h2>

<script type="text/javascript">

//variable that will increment through the images
var step=0

function slideit(){
 //if browser does not support the image object, exit.
 if (!document.images)
  return
 document.getElementById('slide').src = slideimages[step].src
 if (step<1)
  step++
 else
  step=0
 //call function "slideit()" every 2.5 seconds
 setTimeout("slideit()",2500)
}

slideit()

</script>

</div>

Answer 1

嗯..没有得到你为什么声明了2个slideIt()函数，但无论如何，只需将此函数重写为

function slideit(){
   if (!document.images) return;
   $('#slide').fadeOut(150,function(){
       $('#slide').attr('src', slideimages[step].src);
       $('#slide').fadeIn(150);
   });
   step = step < 0 ? step++ : 0;
}
var intervalId = setInterval(slideIt, 2500);

这是jQuery解决方案，比纯js更短，更漂亮。但是你只能使用js而不是libs，只需将这个func添加到你的代码中

function fade( elem, time ){
    var startOpacity = elem.style.opacity || 1;
    elem.style.opacity = startOpacity;

    (function go() {
         elem.style.opacity -= startOpacity / ( time / 100 );
         elem.style.filter = 'alpha(opacity=' + elem.style.opacity * 100 + ')';

         if( elem.style.opacity > 0 )
            setTimeout( go, 100 );
         else
           elem.style.display = 'none';
     })();
 }

使用它而不是jQuery fadeIn/fadeOut函数进行操作。你可以选择每个，但我建议你jQuery。

在幻灯片中添加FadeOut / FadeIn

1 个答案: