Javascript 赢得图像'；t使用关键帧图像旋转器时，两个块之间的同步坐标

我有一个几乎很好的工作代码的双层图像滑块。我已经尝试创建了两个独立但相同的图像滑块，其中一个图像在循环图像的背景上滑入和滑出视图，但背景图像不会在两个图像块上同步协调。当然，我需要一些帮助

以下是基于我的代码的代码片段：

函数cycleBackgrounds（）{
var指数=0；
$imageEls=$（'.toggle image'）；//获取要循环的图像。
setInterval（函数（）{
//获取下一个索引。如果在末尾，请重新开始。
索引=索引+1<$imageEls.length？索引+1:0；
//显示下一个图像。
$imagels.eq（index.addClass（'show'）；
//隐藏上一个图像。
$imagels.eq（索引-1）.removeClass（'show'）；
}, 10000);
};
//文件准备好了。
$（函数（）{
cycleBackgrounds（）；
});
正文{
背景色：#000000
}
桌子{
保证金：自动；
边界塌陷：分离；
边框间距：100px 0px；
}
.幻灯片1{
宽度：104px；
z指数：0；
高度：219px；
溢出：隐藏；
位置：相对位置；
}
.1，
.2，
{
位置：绝对位置；
宽度：104px；
高度：219px；
}
.1{
左：0；
}
.2{
左：104px；
}
.幻灯片1{
宽度：104px；
高度：219px；
左：0px；
位置：绝对位置；
-webkit动画持续时间：20秒；
-webkit动画迭代计数：无限；
-webkit动画名称：动画幻灯片1；
-moz动画持续时间：20s；
-moz动画迭代次数：无限；
-moz动画名称：anim_slide1；
-ms动画持续时间：20s；
-ms动画迭代次数：无限；
-ms动画名称：动画幻灯片1；
动画持续时间：20秒；
动画迭代次数：无限；
动画名称：动画幻灯片1；
-webkit动画延迟：2s；
-ms动画延迟：2s；
动画延迟：2s；
}
}
@-webkit关键帧动画幻灯片1{
0% {
左：0px；
}
20% {
左：0px；
}
21% {
左：105px；
}
29% {
左：105px；
}
30% {
左：0px；
}
70% {
左：0px；
}
71% {
左：-105px；
}
79% {
左：-105px；
}
80% {
左：0px；
}
100% {
左：0px；
}
}
@-moz关键帧动画幻灯片1{
0% {
左：0px；
}
20% {
左：0px；
}
21% {
左：105px；
}
29% {
左：105px；
}
30% {
左：0px；
}
70% {
左：0px；
}
71% {
左：-105px；
}
79% {
左：-105px；
}
80% {
左：0px；
}
100% {
左：0px；
}
}
@-ms关键帧动画幻灯片1{
0% {
左：0px；
}
20% {
左：0px；
}
21% {
左：105px；
}
29% {
左：105px；
}
30% {
左：0px；
}
70% {
左：0px；
}
71% {
左：-105px；
}
79% {
左：-105px；
}
80% {
左：0px；
}
100% {
左：0px；
}
}
@关键帧动画幻灯片1{
0% {
左：0px；
}
20% {
左：0px；
}
21% {
左：105px；
}
29% {
左：105px；
}
30% {
左：0px；
}
70% {
左：0px；
}
71% {
左：-105px；
}
79% {
左：-105px；
}
80% {
左：0px；
}
100% {
左：0px；
}
}
.幻灯片放映{
宽度：104px；
z指数：0；
高度：219px；
溢出：隐藏；
位置：相对位置；
}
.1，
.2，
{
位置：绝对位置；
宽度：104px；
高度：219px；
}
.1{
左：0；
}
.2{
左：104px；
}
.幻灯片{
宽度：104px；
高度：219px；
左：0px；
位置：绝对位置；
-webkit动画持续时间：50秒；
-webkit动画迭代计数：无限；
-webkit动画名称：动画幻灯片；
-moz动画持续时间：10s；
-moz动画迭代次数：无限；
-moz动画名称：动画幻灯片；
-毫秒动画持续时间：10秒；
-ms动画迭代次数：无限；
-ms动画名称：动画幻灯片；
动画持续时间：10秒；
动画迭代次数：无限；
动画名称：动画幻灯片；
-webkit动画延迟：10秒；
-ms动画延迟：2s；
动画延迟：2s；
}
}
@-webkit动画关键帧幻灯片{
0% {
左：0px；
}
20% {
左：0px；
}
21% {
左：-105px；
}
29% {
左：-105px；
}
30% {
左：0px；
}
70% {
左：0px；
}
71% {
左：105px；
}
79% {
左：105px；
}
80% {
左：0px；
}
100% {
左：0px；
}
}
@-moz关键帧动画幻灯片{
0% {
左：0px；
}
20% {
左：0px；
}
21% {
左：-105px；
}
29% {
左：-105px；
}
30% {
左：0px；
}
70% {
左：0px；
}
71% {
左：105px；
}
79% {
左：105px；
}
80% {
左：0px；
}
100% {
左：0px；
}
}
@-ms关键帧动画幻灯片{
0% {
左：0px；
}
20% {
左：0px；
}
21% {
左：-105px；
}
29% {
左：-105px；
}
30% {
左：0px；
}
70% {
左：0px；
}
71% {
左：105px；
}
79% {
左：105px；
}
80% {
左：0px；
}
100% {
左：0px；
}
}
@动画幻灯片的关键帧{
0% {
左：0px；
}
20% {
左：0px；
}
21% {
左：-105px；
}
29% {
左：-105px；
}
30% {
左：0px；
}
70% {
左：0px；
}
71% {
左：105px；
}
79% {
左：105px；
}
80% {
左：0px；
}
100% {
左：0px；
}
}
/*交替/过渡效果的样式*/
.切换图像{
位置：绝对位置；
宽度：100%；
排名：0；
左：0；
高度：219px；
过渡：不透明度1s缓进缓出；
}
/*特定图像的样式*/
.第一张图片{
背景图像：url（'http://s16879.storage.proboards.com/6436879/i/OfhfhHNr42EQE_jVr3sM.gif');
背景尺寸：104px 219px；
z指数：-1；
不透明度：0；
}
.第二幅图像{
背景图像：url（'http://s16879.storage.proboards.com/6436879/i/Q1bqSCICZHlq5KP4jLCI.gif');
背景尺寸：104px 219px；
z指数：-1；
不透明度：0；
}
.第三幅图像{
背景图像：url（'http://s16879.storage.proboards.com/6436879/i/v_8VBpL9eMq_hS4JFyp_.gif');
背景尺寸：104px 219px；
z指数：-1；
不透明度：0；
}
第一夫人
$imageEls = $('.toggle-image');

<div class="slideshow1">
  <div class="slide1">
    <img src="http://s16879.storage.proboards.com/6436879/i/ihfBlEhkcXWqZh3B8tOm.gif" width="104px" height="219px" />
  </div>
  <div class="background-image toggle-image first-image show"></div> <!-- index = 0 -->
  <div class="background-image toggle-image second-image"></div> <!-- index = 1 -->
  <div class="background-image toggle-image third-image"></div> <!-- index = 2 -->
</div>
<!-- stripped out code irrelevant to answer -->
<div class="slideshow1">
  <div class="slide1">
    <img src="http://s16879.storage.proboards.com/6436879/i/ihfBlEhkcXWqZh3B8tOm.gif" width="104px" height="219px" /> </div>
  <div class="background-image toggle-image first-image show"></div> <!-- index = 3 -->
  <div class="background-image toggle-image second-image"></div> <!-- index = 4 -->
  <div class="background-image toggle-image third-image"></div> <!-- index = 5 -->
</div>

function cycleBackgrounds() {
  var index = 0;
  $slideShows = $('.slideshow1');
  $imageEls = $('.toggle-image'); // Get the images to be cycled.

  setInterval(function() {

    // Get the next index.  If at end, restart to the beginning.
    // Since we are dividing it by 2, the loop would only go from index = 0 to 2.
    index = index + 1 < ($imageEls.length / 2) ? index + 1 : 0;

    // Show the next image corresponding to the index under each slideshow
    $slideShows.each(function() {
      $(this).children('.toggle-image').eq(index).addClass('show');
      // Hide the previous image.
      $(this).children('.toggle-image').eq(index - 1).removeClass('show');
    });
  }, 10000);
};