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

Question

我有一个来自 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

感谢您的帮助!

Answer 1

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