Javascript 幻灯片显示不正确的问题

我在让html文档中的幻灯片正常工作时遇到问题。我正在尝试将幻灯片放在我的homebody div中，以便布局与我的其他网页相同。此外，我的“上一个”和“下一个”按钮不会出现在我希望它们出现的图像旁边。附件是我的幻灯片演示和homebody容器部分代码示例的链接。如有任何帮助，将不胜感激

在此处输入代码

---

不知道你所说的“家庭成员”是什么意思

• 在你的小提琴中，图像链接到本地图像，因此它们不起作用-更新这些图像
• 我将您的JS移动到HTML代码窗口，因为JSFIDLE无法识别它们，如果它们出于某种原因出现在JS窗口中
• 我从幻灯片容器（

  .slideshow container

  ）中删除了浮动，并应用了

  边距：auto这样它就可以居中了

• 你的后/下一个链接有

  top:50%；利润率最高：50%将它们在屏幕上向下推得太远。将
  position:relative
  应用到幻灯片显示容器（
  .slideshow container
  ）以使后/下一个箭头的相对父箭头定位，删除
  边距顶部
  CSS并应用
  transform:translateY（-50%）以使它们在幻灯片中垂直居中
  

这就是你想要的吗

.slideshow容器{
宽度：650px；
保证金：自动；
位置：相对位置；
}
.prev，
.下一个{
光标：指针；
位置：绝对位置；
最高：50%；
宽度：自动；
填充：16px；
颜色：白色；
字体大小：粗体；
转化：translateY（-50%）；
字号：18px；
过渡期：0.6秒；
边界半径：0 3px 3px 0；
}
.下一个{
右：0；
边界半径：3px 0 3px；
}
.prev:悬停，
.下一步：悬停{
背景色：rgba（0,0,0,0.8）；
}
.文本{
颜色：#F2F2；
字体大小：15px；
填充：8px 12px；
位置：相对位置；
底部：8px；
宽度：100%；
文本对齐：居中；
}
.numbertext{
颜色：#F2F2；
字体大小：12px；
填充：8px 12px；
位置：绝对位置；
排名：0；
}
多特先生{
光标：指针；
高度：13px；
宽度：13px；
边际：0.2px；
背景色：#bbb；
边界半径：50%；
显示：内联块；
过渡：背景色0.6s；
}
.主动，
.dot:悬停{
背景色：#717171；
}
.圆点{
明确：两者皆有；
}
.褪色{
-webkit动画名称：淡入淡出；
-webkit动画持续时间：1.5s；
动画名称：淡入淡出；
动画持续时间：1.5s；
}
@-webkit关键帧淡入淡出{
从{
不透明度：.4
}
到{
不透明度：1
}
}
@关键帧淡入淡出{
从{
不透明度：.4
}
到{
不透明度：1
}
}
主体p{
边缘底部：20px；
}

1/3
说明文字
2/3
说明文字
3/3
说明文字
❮
❯
var slideIndex=1；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“dot”）；
如果（n>幻灯片长度）{
slideIndex=1
}
if（n<1）{
slideIndex=slides.length
}
对于（i=0；i

谢谢Coker先生，他帮了很多忙。homebody是页面布局的一部分。我希望所有的网页都有相同的布局，所以我想把幻灯片放在。我是否可以将用于homebody的相同css放置到幻灯片显示容器中，以使其在页面上按我所希望的方式对齐？@DeAndre re：“我是否可以将用于homebody的相同css放置到幻灯片显示容器中，以使其在页面上按我所希望的方式对齐？”。你试过看吗？最坏的情况是它不起作用。只需先备份你的文件。请随意分享你的网站或代码或任何东西，我可能会提供帮助。好的，我一定会的。我明天就分享！谢谢你的帮助！