Home/ Questions/Q 8300635
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T16:38:10+00:00

I am trying to create a silde show without using any plugin. I need

  • 0

I am trying to create a silde show without using any plugin.
I need a timer which reducing its height and changes with the image and timer having a clicking event also. https://store.sap.com/sap/cpa/repository/store/sapstore/US/default.html.
This is the one which I am trying.

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

});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    $(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");
       });
   }

});

    I put the prevPrevIndex so that images were repeated less often )) you can remove it

    • 0