mardi 1 mai 2018

Fadein 3 Random Images

Following the details here I'm trying to achieve 3 random images but without no repeatation

jQuery(function(){
    function random(n) {
        return Math.floor(Math.random() * n);
    }
    var transition_time = 1000;
    var waiting_time = 100;
    var images = $('div.block img');
    var n = images.length;
    var current = random(n);
    images.hide();
    images.eq(current).show();
    
    var interval_id = setInterval(function () {
        images.eq(current).fadeOut(transition_time, function () {
            current = random(n);
            images.eq(current).fadeIn(transition_time);
        });
    }, 2 * transition_time + waiting_time);
})

jQuery(function(){
    function random(m) {
        return Math.floor(Math.random() * m);
    }
    var transition_time = 1500;
    var waiting_time = 200;
    var images = $('div.block2 img');
    var m = images.length;
    var current = random(m);
    images.hide();
    images.eq(current).show();
    
    var interval_id = setInterval(function () {
        images.eq(current).fadeOut(transition_time, function () {
            current = random(m);
            images.eq(current).fadeIn(transition_time);
        });
    }, 2 * transition_time + waiting_time);
})

jQuery(function(){
    function random(o) {
        return Math.floor(Math.random() * o);
    }
    var transition_time = 2000;
    var waiting_time = 200;
    var images = $('div.block3 img');
    var o = images.length;
    var current = random(o);
    images.hide();
    images.eq(current).show();
    
    var interval_id = setInterval(function () {
        images.eq(current).fadeOut(transition_time, function () {
            current = random(o);
            images.eq(current).fadeIn(transition_time);
        });
    }, 2 * transition_time + waiting_time);
})
.b{position:relative;float:left;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="b">
 <div class="block">
 <img src="http://placehold.it/100/fffff0">
 <img src="http://placehold.it/100/336699">
 <img src="http://placehold.it/100/003366">
 <img src="http://placehold.it/100/333333">
 <img src="http://placehold.it/100/999999">
 <img src="http://placehold.it/100/000000">
 <img src="http://placehold.it/100/ff0000">
 <img src="http://placehold.it/100/eeeeee">
 <img src="http://placehold.it/100/bbbbbb">
 </div>
 </div>
 
  <div class="b">
 <div class="block3">
 <img src="http://placehold.it/100/fffff0">
 <img src="http://placehold.it/100/336699">
 <img src="http://placehold.it/100/003366">
 <img src="http://placehold.it/100/333333">
 <img src="http://placehold.it/100/999999">
 <img src="http://placehold.it/100/000000">
 <img src="http://placehold.it/100/ff0000">
 <img src="http://placehold.it/100/eeeeee">
 <img src="http://placehold.it/100/bbbbbb">
 </div>
 </div>
 
  <div class="b">
 <div class="block2">
 <img src="http://placehold.it/100/fffff0">
 <img src="http://placehold.it/100/336699">
 <img src="http://placehold.it/100/003366">
 <img src="http://placehold.it/100/333333">
 <img src="http://placehold.it/100/999999">
 <img src="http://placehold.it/100/000000">
 <img src="http://placehold.it/100/ff0000">
 <img src="http://placehold.it/100/eeeeee">
 <img src="http://placehold.it/100/bbbbbb">
 </div>
 </div>

Do you mind to help me performing this change? I'm new at jQuery but I know there's a better way to achieve without repeat the codes and also ignoring the duplicates at the same time. If you could offer an easy way instead of this codes, It's also appreciated




Aucun commentaire:

Enregistrer un commentaire