如何从图像数组创建一个非常简单的 jquery 幻灯片？答案

【问题标题】：How to create a very simple jquery slideshow from image array?如何从图像数组创建一个非常简单的 jquery 幻灯片？
【发布时间】：2014-12-17 16:13:13
【问题描述】：

我有一个来自 php 并转换为 JavaScript 数组的图像数组。代码。

    var imgs = ["data/lst/seasonal/lst-2002-Apr-May-Jun.png",
            "data/lst/seasonal/lst-2002-Jul-Aug-Sep.png",
            "data/lst/seasonal/lst-2002-Oct-Nov-Dec.png"]
    var cnt = imgs.length;

    $(function() {
        setInterval(Slider, 5000);
    });

    function Slider() {
    $("#imageSlide").show("fast", function() {
       $(this).attr("src", imgs[(imgs.length++) % cnt]).show();
    });
    }
    <img id="imageSlide" alt="" src="" />

代码有效，但缺少一些重要的东西。

见JSFIDDLE DEMO http://jsfiddle.net/zwtcwsgh/

我想要以下功能。

  1. Using image file names all caps minus extension as a caption. 
     eg. LST-2002-OCT-NOV-DEC
  2. With back and next buttons. 
  3. stop animation on mouse hover. 
  4. animation without a break. Something similar to show(); 
  5. loading animation till the entire images are loaded.

最重要的一次是1、2、3

感谢您的帮助！

【问题讨论】：

您是否考虑过任何用于幻灯片放映的第三方库，例如bxslider.com
我考虑过它们，但它们对于 php echo 输出来说太大了。
为什么要回显该脚本而不仅仅是
是的，bxslider.js 可以在页面中链接。在我的情况下，当用户在一个范围内搜索图像时，php 会获取一个范围内的图像数组。然后输出应该带有基于用户请求的幻灯片。

标签： javascript jquery arrays slideshow caption

【解决方案1】：

将它们打印到一个，然后你可以使用Unslider。我认为您可能需要在字幕上做一些工作，但这是我经常使用的一个很棒的小扩展

【讨论】：

你能告诉我如何在其中添加动态图像数组吗？
好的，我会试试的。谢谢！
我试过了，但它只显示它们而不显示幻灯片。我已将 unislider.min.js 与脚本 src 链接起来。然后我添加了这个。
echo 'var cnt = imgs.length;'; echo ' for(i=0; i"); } $(function() { $("banner").unslider(); }); ';回声'';但它只显示没有幻灯片的图像。
你应该有：Jquery js、Unslider js、Unslider CSS