Question

嗨我有一个小幻灯片的问题。

 // define array of image paths (src) 
 var backgroundImage = [
   { src: 'assets/bg/1.jpg' }, 
   { src: 'assets/bg/2.jpg' }, 
   { src: 'assets/bg/3.jpg' }, 
   { src: 'assets/bg/4.jpg' }, 
   { src: 'assets/bg/5.jpg' }];


 $(document).ready(

     function() {

         // index to select item in array
         var i = 0;

         // use the jQuery function ($) to select the <img> by id
         var img = $('#back-img');

         // set the initial src value 
         img.attr("src", backgroundImage[i].src);

         // advance to next image 
         i++;

         // setInterval takes to parameters, a callback and an interval 
         window.setInterval(function() {

                 // reset the index to 0 if past the end
                 if (i >= backgroundImage.length) {
                     i = 0;
                 }

                 // fade out the old image and fade in the new one 
                 img.attr("src").fadeOut(900, function() {
                     alert("ok")
                 });

                 img.attr("src", backgroundImage[i].src).fadeIn('900');

                 // advance to next image
                 ++i;
             },

             // set the image time to 7000ms
             7000
         )
     }
 );

脚本不起作用。它加载第一个图像，但不会交换到其他图像。我想我的fadeOut函数有问题，如果我用hide（）函数替换它，它可以工作......

Answer 1

.fadeOut()中出现语法错误需要直接在img上调用.attr

img.fadeOut('900', function() {alert("ok")});

http://jsfiddle.net/S4SmM/476/

您可能还想考虑将图像更改代码放在调用alert("ok");的回调中。

以下是回调中更平滑动画的示例：

// fade out the old image and fade in the new one 
img.fadeOut('900', function() {
    img.attr("src", backgroundImage[i].src).fadeIn('900'); 
});

http://jsfiddle.net/S4SmM/485/

jQuery幻灯片放映，fadeOut问题

1 个答案: