在javascript图像滑块上添加导航

所以我一直在为我的网站寻找一个图像滑块，我发现了一个非常简单的例子，我用过这个例子，但是我非常坚持如何为它添加一个简单的导航

我只需要一个按钮就可以转到下一张和上一张图片

我的守则如下：

    <script>
        function imageData(_imageSrc, _imageTitle){
            this.imageSrc   = _imageSrc;
            this.imageTitle = _imageTitle;
        }

        var imageSlider_counter = 0;
        var imageDataList = new Array();

        function Ready(){
            document.getElementById("ImageContainer").innerHTML = "<img id='imageSlider-image' src=''/>";
            document.getElementById("imageSlider-image").src = imageDataList[imageSlider_counter].imageSrc;
            setInterval(function(){
                imageSlider_counter = (imageSlider_counter + 1) % imageDataList.length;
                document.getElementById("imageSlider-image").src = imageDataList[imageSlider_counter].imageSrc;


            },6000);
        }
     </script>

---

这是一个更简单的图像滑块，它几乎内置了所有内容：

如何设置的示例如下：

<div class="small-10 columns">
    <ul data-orbit>
        <li>
            <img src="filelocation1.jpg" alt="Slide 1">
            <div class="orbit-caption">
                Put text here if you want a caption for your images
            </div>
        </li>
        <li>
            <img src="filelocation2.jpg"  alt="Slide 2">    
        </li>
    </ul>
</div>

对每个图像重复该格式。现在来看看功能

您必须添加以下脚本：

<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/foundation/foundation.js"></script>
<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/foundation/foundation.orbit.js"></script>

您还需要启动轨道：

<script>
    $(document).foundation({
    orbit: {
        animation: 'slide',
        timer_speed: 10000,
        pause_on_hover: true,
        resume_on_mouseout: true,
        animation_speed: 500,
        navigation_arrows: true,
        bullets: true,
        next_on_click: true
        }
    });
    $(function () { $(document).foundation(); });
    $('#example-orbit').foundation('orbit');
</script>

---

如果你不想播放幻灯片，而只想播放用户反复播放的幻灯片，那么就不要使用动画、计时器等。希望这能有所帮助。

哦，哇，这对我有很大帮助，我唯一有点担心的是，这是一个学校的项目，所以我必须解释我所做的大部分事情。我会仔细看看，看看是否能理解发生了什么事。谢谢你@洛伦斯克莱恩：没问题。祝你好运。如果这是你的情况，一定要通读我链接的页面。@LorenzKlein这可能也有帮助。