Javascript 每次运行更改图像的功能<；h4>；到达窗户中间

我完全被这个问题所困扰。我需要运行一个函数，每当我的

h4

到达窗口中间时，该函数都会更改图像。在我的例子中，每个

h4

有一个图像，当用户向下滚动或向上滚动时更改它。也就是说，每个

img

将属于一个

h4

。到目前为止，我已经实现了根据

h4

改变不透明度，但我没有改变图像。这是我的html：

<div id="column-left">
  <h4 class="active">Targets</h4>
  <h4>Valors</h4>
  <h4>Me </h4>
</div>

<div id="column-right">
    <img src="img/about/map.jpg" class="active" alt="Map"/>
    <img src="img/about/bridge.jpg" alt="Bridge"/>
    <img src="img/about/road.jpg" alt="Road"/>
</div>

目标
英勇
我

这是我的密码：

var findMiddleElement = (function(docElm){
var viewportHeight = docElm.clientHeight,
    elements = $('h4');
$('h4').first().css('opacity','1','important');
return function(e){
    var middleElement;
    if( e && e.type == 'resize' )
        viewportHeight = docElm.clientHeight;

    elements.each(function(){
        var pos = this.getBoundingClientRect().top;
        // if an element is more or less in the middle of the viewport
        if( pos > viewportHeight/2.5 && pos < viewportHeight/1.5 ){
            middleElement = this;
            console.log('I am in the middle');
            changeImage();
            return false; // stop iteration 

        }
    });

    $(middleElement).css({opacity:'1', transition : 'opacity 1s ease-in-out'});

}
})(document.documentElement);

$(window).on('scroll resize', findMiddleElement);

function changeImage(){
    console.log('I am ready to change the image');
    $('img').each(function(){
        $('.active').removeClass('active');
        $(this).addClass('active');
    });
}

var findMiddleElement=（函数（docElm）{
var viewportHeight=docElm.clientHeight，
元素=$（'h4'）；
$（'h4'）.first（）.css（'opacity'，'1'，'important'）；
返回函数（e）{
var中间元素；
如果（e&&e.type=='resize'）
视口高度=docElm.clientHeight；
元素。每个（函数（）{
var pos=this.getBoundingClientRect（）.top；
//如果一个元素或多或少在视口的中间
如果（位置>视口高度/2.5和位置<视口高度/1.5）{
中间元素=此；
log（“我在中间”）；
changeImage（）；
返回false；//停止迭代
}
});
css（{opacity:'1'，transition:'opacity 1s ease in out'}）；
}
})（document.documentElement）；
$（窗口）.on（'scroll resize'，findmddleElement）；
函数changeImage（）{
log（'我准备好更改映像'）；
$（'img'）。每个（函数（）{
$（'.active'）.removeClass（'active'）；
$（this.addClass（'active'）；
});
}

这是小提琴：

提前感谢。

您的

changeImage（）

只需将

活动的
类分配给页面上的最后一个图像元素。对于该类在图像元素上的行为，您没有任何css规则，因此显然它不会影响任何东西。我认为有两种可能的解决办法：

将当前
h4
元素（您正在循环）的索引发送到
changeImage
函数，并选择
img:n子元素（idx+1）
元素以应用
活动的
类。它还需要一些css，比如
img{display:none；}img.active{display:block；}
。在我看来，这不是很灵活

添加一些属性，例如，
数据图像
，图像源对应于每个
h4
元素。然后，在右边的列中只有一个image元素，您的代码看起来类似于：

/*请更改MI图像*/
var findmidleElement=（函数（docElm）{
var viewportHeight=docElm.clientHeight，
元素=$（'h4'）；
$（'h4'）.first（）.css（'opacity'，'1'，'important'）；
返回函数（e）{
var中间元素；
如果（e&&e.type=='resize'）视口高度=docElm.clientHeight；
元素。每个元素（函数（idx）{
var pos=this.getBoundingClientRect（）.top；
//如果一个元素或多或少在视口的中间
如果（位置>视口高度/2.5和位置<视口高度/1.5）{
中间元素=此；
log（“我在中间”）；
changeImage（$（this.data（'image'））；
返回false；//停止迭代
}
});
$（middleElement）.css({
不透明度：“1”，
过渡：“不透明度1s缓进缓出”
});
};
})（document.documentElement）；
$（窗口）.on（'scroll resize'，findmddleElement）；
//您可能不需要一行函数
函数changeImage（src）{
log（'我准备好更改映像'）；
$（'img'）.attr（'src'，src）；
}
html，
身体{
宽度：100%；
身高：100%；
字号：0；
保证金：0；
填充：0；
背景色：#000；
}
h4{
文本转换：大写；
}
.左栏{
显示：内联块；
宽度：40%；
身高：100%；
身高：100%；
背景色：#000；
字体大小：16px；
颜色：#FFF；
填充：20px；
框大小：边框框；
}
.右栏{
显示：内联块；
宽度：60%；
身高：100%；
身高：100%；
背景色：黑色；
位置：固定；
}
.右栏img{
最小宽度：100%；
最小高度：100%；
}
h4{
不透明度：.2；
}

目标
Nunc vitae turpis sem。奥古斯·利古拉（Aliquam augue ligula）、拉齐尼亚·奎斯·马萨（lacinia quis Masa Volumpat）、奥纳雷·奎姆（Breatum ornare quam）。请不要忘记奥雷姆·奥奇，坐在欧盟的拱门前。普罗因欧盟毛里斯利古拉。佩伦茨克弗林利亚、尼斯拉欧盟乌兰科珀亨德雷特、尼斯拉内克
拍卖人turpis，nec Placelat justo massa vel erat。前庭是亨德雷特家族的门廊。努克·帕特在土拨鼠的饮食中。杜伊斯·奥迪奥·马萨（Duis odio massa），普尔维纳尔欧盟的马克西姆斯（maximus），塞姆珀·塞德·厄洛斯（semper sed eros）。在森佩尔举行的一次庆祝活动
自由法雷特拉。暂时性的，妊娠期的，不适的，同侧的。维瓦摩斯欧盟委员会。非妊娠期子宫肌瘤。前拉克斯的努克

英勇
在狮子座射手座的rutrum，Maecenas sollicitudin ligula nibh。我们是精英，我们是精英。阿尔库·埃利特吊牌，朗卡斯·韦尔内克吊牌，阿利奎姆·马萨吊牌。Mauris tincidunt dui a ipsum suscipit malesuada。多内克·拉库斯·胡斯托，波特提托
小白鼠，小白鼠。不发酵马萨，nec康格胡斯托。两人因性骚扰而死亡，两人因性骚扰而死亡。这是一个巨大的过程，也是一个巨大的过程。马萨门和罗纳斯门都是空的。
非乌拉姆科佩尔奥迪奥（ullamcorper odio）的馆长，欧盟封建民族联盟（eu feugiat urna）。整数a mattis magna，单位为sollicitudin arcu。萨吉提斯岛上的欧虎鲸。圣女圣女圣女圣女圣女圣女圣女圣女圣女圣女圣女圣女圣女圣女圣女圣女圣女圣女圣女圣女圣女圣女圣女圣女圣女圣女圣女圣女圣女圣女圣女圣女圣女圣女圣女圣女圣女圣。在risus ex，在risus at，efficitur
康格乌尔纳。塞德·波苏尔·莫利斯·康塞特图

我
在狮子座射手座的rutrum，Maecenas sollicitudin ligula nibh。我们是精英，我们是精英。阿尔库·埃利特悬钩子、内克罗纳斯悬钩子、阿利夸姆浮雕