Javascript 更改图像滑块中每个循环的区域背景颜色

我的主页上有一个非常简单的滑动条，可以循环浏览不同的图像

为了增加趣味性，我想知道是否可以在每次加载新图像时更改

cd hero

部分的

背景色：

值？我是否可以将其存储在数组中，以便第一幅图像加载红色背景，第二幅图像加载蓝色背景，依此类推

演示：

jQuery（文档）.ready（函数（$）{
var slideswapper=$（'.cd-hero-slider'）；
//检查DOM中是否存在.cd hero滑块
如果（slidesWrapper.length>0）{
var primaryNav=$（'.cd primary nav'），
sliderNav=$（'.cd sliderNav'），
navigationMarker=$（'.cd marker'），
slidesNumber=slidesWrapper.children（'li'）。长度，
visibleSlidePosition=0，
自动播放ID，
自动播放延迟=5000；
//上传视频（如果不是在移动设备上）
上传视频（幻灯片包装器）；
//自动播放滑块
设置自动播放（slidesWrapper、slidesNumber、自动播放延迟）；
//在手机上-打开/关闭主导航单击/点击菜单图标
primaryNav.on（'click'，函数（事件）{
if（$（event.target）.is（'.cd primary nav'））$（this.children（'ul'））.toggleClass（'is-visible'）；
});
//更改可见幻灯片
滑动导航（'单击'，'李'，功能（事件）{
event.preventDefault（）；
var selectedItem=$（此值）；
如果（！selectedItem.hasClass（'selected'））{
//如果它还没有被选中
var selectedPosition=selectedItem.index（），
activePosition=slidesWrapper.find（'li.selected'）.index（）；
如果（活动位置<所选位置）{
nextSlide（slidesWrapper.find（'.selected'）、slidesWrapper、sliderNav、selectedPosition）；
}否则{
prevSlide（slidesWrapper.find（'.selected'）、slidesWrapper、sliderNav、selectedPosition）；
}
//这用于自动播放
visibleSlidePosition=所选位置；
更新SliderNavigation（sliderNav，selectedPosition）；
updateNavigationMarker（导航标记，selectedPosition+1）；
//重置自动播放
设置自动播放（slidesWrapper、slidesNumber、自动播放延迟）；
}
});
}
函数nextSlide（可视幻灯片、容器、分页、n）{
VisibleSiled.removeClass（“从左到右选择”）.addClass（“正在移动”）.one（'WebKittTransitionEnd otransitionend otransitionend otransitionend msTransitionEnd transitionend'，function（）{
visibleSlide.removeClass（'is-moving'）；
});
container.children（'li'）.eq（n）.addClass（'selected from right'）.prevAll（）.addClass（'move-left'）；
检查视频（可视幻灯片，容器，n）；
}
函数prevSlide（可视幻灯片、容器、分页、n）{
VisibleSiled.removeClass（“从左到右选择”）.addClass（“正在移动”）.one（'WebKittTransitionEnd otransitionend otransitionend otransitionend msTransitionEnd transitionend'，function（）{
visibleSlide.removeClass（'is-moving'）；
});
container.children（'li'）.eq（n）.addClass（'selected from left'）.removeClass（'move-left'）.nextAll（）.removeClass（'move-left'）；
检查视频（可视幻灯片，容器，n）；
}
函数更新lidernavigation（分页，n）{
var navigationDot=pagination.find（'.selected'）；
navigationDot.removeClass（'selected'）；
分页.find（'li'）.eq（n）.addClass（'selected'）；
}
函数setAutoplay（包装、长度、延迟）{
if（wrapper.hasClass（'autoplay'））{
clearInterval（自动播放ID）；
autoPlayId=window.setInterval（函数（）{autoplaySlider（长度）}，延迟）；
}
}
功能自动播放滑块（长度）{
if（可视滑动位置<长度-1）{
nextSlide（slideswapper.find（'.selected'）、slideswapper、sliderNav、visibleSlidePosition+1）；
visibleSlidePosition+=1；
}否则{
prevside（slideswapper.find（'.selected'），slideswapper，sliderNav，0）；
visibleSlidePosition=0；
}
updateNavigationMarker（navigationMarker，visibleSlidePosition+1）；
更新SliderNavigation（sliderNav、visibleSlidePosition）；
}
功能上传视频（容器）{
container.find（'.cd bg video wrapper'）.each（函数（）{
var videoWrapper=$（此）；
if（videoWrapper.is（':visible'））{
//如果可见-我们不在移动设备上
var videoUrl=videoWrapper.data（'video'），
视频=$（''）；
video.appendTo（videoWrapper）；
//播放第一张幻灯片时播放视频
if（videoWrapper.parent（'.cd bg video.selected'）.length>0）video.get（0.play（）；
}
});
}
功能检查视频（隐藏幻灯片，容器，n）{
//检查视口外的视频是否正在播放-如果是，请暂停
var hiddenVideo=hiddenSlide.find（'video'）；
如果（hiddenVideo.length>0）hiddenVideo.get（0.pause（）；
//检查选择幻灯片是否包含视频元素-如果是，播放视频
var visibleVideo=container.children（'li'）.eq（n）.find（'video'）；
如果（visibleVideo.length>0）visibleVideo.get（0.play（）；
}
函数updateNavigationMarker（marker，n）{
marker.removeClassPrefix（'item'）.addClass（'item-'+n）；
}
$.fn.removeClassPrefix=函数（前缀）{
//删除以“前缀”开头的所有类
每个功能（i，el）{
var classes=el.className.split（“”）.filter（函数（c）{
返回c.lastIndexOf（前缀，0）！==0；
});
el.className=$.trim（classes.join（“”））；
});
归还这个；
};
});
/*http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
许可证：无（公共域）
*/
html、正文、div、span、小程序、对象、iframe、，
h1、h2、h3、h4、h5、h6、p、块报价、预，
a、 缩写，首字母缩写，地址，大，引用，代码，
del、dfn、em、img、ins、kbd、q、s、samp、，
小、走向、强、次、辅助、tt、var、，
b、 u，i，中心，
dl，dt，dd，ol，ul，li，
字段集、表单、标签、图例、，
表格、标题、正文、tfoot、THAD、tr、th、td、，
文章、旁白、画布、细节、嵌入、，
图，figcaption，页脚，页眉，H组，
菜单、导航、输出、ruby、节、摘要、，
时间、标记、音频、视频{
保证金：0；
填充：0；
边界：0；
字体大小：100%；
字体：继承；
垂直对齐：基线；
}
/*旧浏览器的HTML5显示角色重置*/
除此之外，第条
var sectionContainer = $('.cd-hero');
var slideColors = ['red', 'blue'];

function updateBackgroundColor(currentSlideIndex) {
    if(currentSlideIndex < slideColors.length) {
        sectionContainer.css('background-color', slideColors[currentSlideIndex]);
    }
}

var primaryNav = $('.cd-primary-nav'),
    sliderNav = $('.cd-slider-nav'),
    navigationMarker = $('.cd-marker'),
    slidesNumber = slidesWrapper.children('li').length,
    visibleSlidePosition = 0,
    autoPlayId,
    autoPlayDelay = 2000,
    backgroundColors = ['FF0000', '00FF00', '0000FF'],
    _backgroundIndex;

function changeBackground() {
    if(backgroundColors && backgroundColors.length > 0) {
        $('.cd-hero-slider').css('background-color', '#'+backgroundColors[_backgroundIndex]);

        if(_backgroundIndex < backgroundColors.length - 1) {
            _backgroundIndex++;
        }
        else {
            _backgroundIndex = 0;
        }
    }
}