在JavaScript圖像滑塊上添加導航

Question

因此，我一直在尋找網站的圖片滑塊，並且找到了一個使用過的簡單示例，但是我非常想知道如何在其中添加簡單的導航。

我只需要一個按鈕即可轉到下一張和上一張圖像。

我的代碼：

    <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>

Answer 1

這是一個圖像滑塊，它更加簡單，並且幾乎內置了所有內容： Orbit 。

如何進行設置的示例如下：

<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>

如果您不想播放幻燈片，而只是希望用戶反復瀏覽的滑塊，請擺脫動畫，計時器等。希望這對您有所幫助。