滚动时淡出一个背景图像而淡入另一个

Question

我正在尝试创建一个功能，该功能允许图像随着人在页面中滚动而淡入淡出。 与我以前的类似问题类似 ，我只是希望滚动条在对象中的图像之间循环，并在用户滚动时让它们的fadeIn和fadeOut ，而不是让脚本找到滚动手柄的位置。 我将如何完成？

var Plane_Images = {
    Skin: {
        name: "Skin Schematic",
        image: "images/Top-2.png",
        schematics: [["Nose Wheel Steering", "NST"], ["B", "B.1"], ["C", "C.1"], ["D", "D.1"]]
    },
    Structure: {
        name: "Structure Schematic",
        image: "images/ata21-2.png",
        schematics: [["Landing Gear Handle", "TRO"], ["F", "F.1"], ["G", "G.1"], ["H", "H.1"]]
    },
    Electrics: {
        name: "Electrics Schematic",
        image: "images/ata26-2.png",
        schematics: [["I", "I.1"], ["J", "J.1"], ["K", "K.1"], ["L", "L.1"]]
    },
    Fuel: {
        name: "Fuel Schematic",
        image: "images/Top-2.png",
        schematics: [["M", "M.1"], ["N", "N.1"], ["O", "O.1"], ["P", "P.1"]]
    }
}

到目前为止，我能够连续fadeIn和fadeOut一幅图像，但不能连续fadeOut另一幅图像。 这是我当前的脚本。

for(var images in Plane_Images){
    var image_src = Plane_Images[images].image;

    $("#scroll").on("slidestart", function(){
        $(this).on("mousemove touchmove", function(){
            $("#plane_image").css("background-image", "url(" +image_src +")").fadeOut("slow");
            $("#plane_image").css("background-image", "url(" +image_src +")").fadeIn("slow");
        })
    })
}

Answer 1

您在使用for循环时遇到问题。 您正在做的是针对同一事件加载多个触发器。 触发事件后，它们将在每个mousemove事件中一个接一个地运行。

为了遍历图像，您需要具有一个能够确定序列中下一个图像的函数，我将其称为getNextPlaneImage() 。 这从0循环到imagesList.length - 1 ，然后又从0继续，其中imagesList是Plane_Images JS对象的键的数组。 我们可以针对该列表使用索引i=0,1,2...来选择“下一个”键，并使用该键来检索图像。

最后，您将需要在.fadeIn()的回调.fadeOut()上调用.css()和.fadeIn() ，否则您将看到背景图像发生变化，然后fadeOut()动画。

为了简化下面的示例，我选择了带有onclick的button ，该button会触发nextImage回调。

var imagesList = [];

for(var images in Plane_Images){
    imagesList.push(images);
}

var i = 0;

function getNextPlaneImage() {
  var plane_image = Plane_Images[imagesList[i]].image;
  i = (i+1) % imagesList.length;
  return plane_image;
}


$('#scroll').on("nextImage", function(){
 $("#plane_image").fadeOut({
   duration: 'slow',
   complete: function () {
     $(this).css("background-image", "url(" +getNextPlaneImage() +")").fadeIn('slow');
   }
 });
});

 var Plane_Images = { Skin: { name: "Skin Schematic", image: "http://placehold.it/200x300", schematics: [["Nose Wheel Steering", "NST"], ["B", "B.1"], ["C", "C.1"], ["D", "D.1"]] }, Structure: { name: "Structure Schematic", image: "http://placehold.it/200x200", schematics: [["Landing Gear Handle", "TRO"], ["F", "F.1"], ["G", "G.1"], ["H", "H.1"]] }, Electrics: { name: "Electrics Schematic", image: "http://placehold.it/200x100", schematics: [["I", "I.1"], ["J", "J.1"], ["K", "K.1"], ["L", "L.1"]] }, Fuel: { name: "Fuel Schematic", image: "http://placehold.it/300x200", schematics: [["M", "M.1"], ["N", "N.1"], ["O", "O.1"], ["P", "P.1"]] } }; var imagesList = []; for(var images in Plane_Images){ imagesList.push(images); } var i = 0; function getNextPlaneImage() { var plane_image = Plane_Images[imagesList[i]].image; i = (i+1) % imagesList.length; return plane_image; } $('#scroll').on("nextImage", function(){ $("#plane_image").fadeOut({ duration: 'slow', complete: function () { $(this).css("background-image", "url(" +getNextPlaneImage() +")").fadeIn('slow'); } }); }); 

 #plane_image { width: 400px; height: 400px; background: black center no-repeat; border: 2px blue solid; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="scroll"> <button onclick="$(this).trigger('nextImage');"> Next </button> </div> <div id="plane_image"></div>