0

我正在尝试在不使用任何插件的情况下创建一个 silde 表演。我需要一个定时器，它可以降低它的高度，并随着图像和定时器的变化而变化，也有一个点击事件。https://store.sap.com/sap/cpa/repository/store/sapstore/US/default.html。这是我正在尝试的。

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>

jQuery

$(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");
        });
    }

});
4

1 回答 1

0 
$(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");
       });
   }

});

我放了prevPrevIndex这样图像重复次数减少））你可以删除它

于 2012-07-29T07:42:46.583 回答