我如何使用javascript在这段已经可以工作的代码中添加幻灯片转换效果？

第一次在这里问问题。自去年3月以来，我一直在认真学习HTML，我对基础知识感到非常满意。当然，我想用Javascript扩展这些基础知识

我觉得我很擅长学习和获取随机代码行，并对它们进行反向工程，使它们为我工作……但作为一个超级新手级别的JavaScript初学者，我并不擅长

说到这里，我成功地运行了两行不同的Javascript代码，并将它们合并在一起，形成了一个“上一行”和“下一行”按钮，在一个无限循环中运行，用点让用户确切地知道隐藏了多少项。基本上，单击向右箭头，一个div消失，另一个div取而代之。单击一个点，它也会将您带到该特定div。幸运的是，所有这些都非常有效，但我希望在单击鼠标右键时显示实际的幻灯片效果/过渡。我希望实际幻灯片从右向左移动，反之亦然

我有一个叫做“猫头鹰旋转木马”的插件，我碰巧遇到了这个插件，它工作得很好，但是我不能（或者我没有足够的知识）对现有的代码进行编辑以满足我的需要，这就是为什么我宁愿从零开始做一些东西，这样我就知道并理解当我做一些轻微的更改时会发生什么

请不要提供插件建议或jQuery解决方案。现在我想正确理解Javascript的基本原理

.ms内容{
最大宽度：100%；
}
.btn容器{
文本对齐：居中；
垫底：10px；
}
.btn浮动{
字体大小：42px；
文字装饰：无；
过渡：所有0.5s缓解；
顶部：20px；
左边距：20px；
右边距：20px；
光标：指针；
}
.btn浮动：悬停{
颜色：#4FAD52；
}
点二{
光标：指针；
高度：13px；
宽度：13px；
利润率：0.5px；
背景色：#bbb；
边界半径：50%；
显示：内联块；
过渡：背景色0.6s；
}
.active，.dot:悬停{
背景色：#7AC143；
}
幻灯片二小姐{
宽度：100%；
高度：100px；
}
.ms幻灯片二：第n张类型（3）{
背景色：#ccc；
}
.ms幻灯片2:n类型（4）{
背景色：#999；
}
.ms幻灯片二：第n张类型（5）{
背景色：#666；
}

❮     
❯
第一分区

第二部分

第三组

var slideIndex_slide_two=1；
showDivs\u slide\u two（slideIndex\u slide\u two）；
功能加滑块二（n）{
showDivs\u slide\u two（slideIndex\u slide\u two+=n）；
}
函数currentDivs\u slide\u two（n）{
showDivs\u slide\u two（slideIndex\u slide\u two=n）；
}
功能显示幻灯片二（n）{
var i；
var x=document.getElementsByClassName（“ms幻灯片二”）；
var dots=document.getElementsByClassName（“点二”）；
如果（n>x.length）{slideIndex\u slide\u two=1}
如果（n<1）{slideIndex\u slide\u two=x.length}
对于（i=0；i