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>

如果您不想播放幻灯片，而只想放置用户迭代的滑块，请摆脱动画，计时器等。希望这会有所帮助。

在javascript图像滑块上添加导航

1 个答案: