Javascript 带计时器的图像幻灯片放映，无需使用任何插件

我正在尝试创建一个没有使用任何插件的silde show。 我需要一个计时器，减少其高度和变化的图像和计时器有一个点击事件也。 这就是我正在尝试的

HTML

<div id="panel">
  <img id="imageSlide" alt="" src="" width="250px" />
</div>

<div id="timer">
<a href="">
<span class="reduce_height">1</span> 
</a>

<a href="">
<span class="reduce_height">2</span> 
</a>

<a href="">
<span class="reduce_height">3</span> 
</a>

<a href="">
<span class="reduce_height">4</span> 
</a>

</div>

---

我把

prevIndex

放进去，这样图像重复的次数就少了。）你可以删除它

那么什么不起作用了？所以，需要帮助的网站不是需要代码的网站。看看其他幻灯片放映插件是如何做到这一点的可能会有所帮助，因为大多数插件都是开源的，所以查看代码应该很容易。

$(function() {

    var imgs = ['http://www.academy-florists.com/images/shop/thumbnails%5CValentines_Day_flowers.jpg', 'http://www.everythingbuttheprincess.com/assets/images/babies-in-bloom-fuchsia-flower_thumbnail.jpg', 'http://www.behok.ru/i/a/cat/gerbera.jpg', 'http://www.thebutterflygrove.com/images/thumbnails/0/200/200/thumbnail_flower-decor-makpk.jpg', 'http://gameinfestedent.com/gallery_photo/medium_image/image1322820610_MainPurpleOrchids3_1a.jpg'];

    var maximages = imgs.length; //No of Images
    $(function() {
        setInterval(Slider, 3000);
    });
    var prevIndex = 0;

    function Slider() {
        $('#imageSlide').fadeOut("slow", function() {
            var shuffleIndex = Math.floor(Math.random() * maximages);
            if (prevIndex == shuffleIndex) {
                while (prevIndex != shuffleIndex) {
                    shuffleIndex = Math.floor(Math.random() * maximages);
                }
            }
            $("#panel").fadeIn("slow").css('background', '#000');

            $(this).attr('src', imgs[shuffleIndex]).fadeIn("slow");
        });
    }

});

$(function() {

    var imgs = ['http://www.academy-florists.com/images/shop/thumbnails%5CValentines_Day_flowers.jpg', 'http://www.everythingbuttheprincess.com/assets/images/babies-in-bloom-fuchsia-flower_thumbnail.jpg', 'http://www.behok.ru/i/a/cat/gerbera.jpg', 'http://www.thebutterflygrove.com/images/thumbnails/0/200/200/thumbnail_flower-decor-makpk.jpg', 'http://gameinfestedent.com/gallery_photo/medium_image/image1322820610_MainPurpleOrchids3_1a.jpg'];

   var maximages = imgs.length; //No of Images
   Slider();
   setInterval(Slider, 3000);
   var prevIndex = 0, prevPrevIndex = 0;

   function Slider() {
       $('#imageSlide').fadeOut("slow", function() {
           do {
               shuffleIndex = Math.floor(Math.random() * maximages);
           } while(prevIndex == shuffleIndex || prevPrevIndex == shuffleIndex)

           prevPrevIndex = prevIndex;
           prevIndex = shuffleIndex;

           $("#panel").fadeIn("slow").css('background', '#000');

           $(this).attr('src', imgs[shuffleIndex]).fadeIn("slow");
       });
   }

});