Sequential-Boxen mit 3 Random Box Schattenfarben

Question

Fall:

verwende ich Owl Karussell für die Boxen mit maximal 10 Thumbnails (das scrollt manuell über den Browser mit definieren Breite jedes Panel). Wie auch immer, ich habe Google auf "Wie erstelle ich 3 zufällige Farben mit jQuery" durchsucht und scheint einige der Ergebnisse sind schwierig für mich zu integrieren.

-Code Abb.1

BoxShadow = function() { 
    var hfiColors = ['#00A9E0', '#E82425', '#EFB12A']; 
    var colors = hfiColors.slice(0); 

    $('.program-gallery .item').each(function(i){ 
    var i = i + 1; 
    var color = Math.floor(Math.random() * colors.length); 

    $(this).css('box-shadow', '0 0 0 5px' + colors[color]); 
    colors = colors.slice(0,color-1).concat(colors.slice(color+1,colors.length-1)); 
    }); 

    $.each(colors, function(i, v){ 
    $('.item' + (+i + 1)).html(colors[i]); 
    }); 
} 
$(document).ready(BoxShadow); 

Dies ist der Code, den ich so weit, und es erzeugt zufällige box-shadow meiner Thumbnails, aber einige Box-Schatten auf meine Anzeige von Miniaturansichten nicht korrekt. Ehrlich gesagt, ich bin jetzt verwirrt über die Code-Struktur.

-Code Abb.2

<div class="program-gallery"> 
    <div class="item"> 
    <figure class="uk-overlay uk-overlay-hover"> 
     <img src="https://placem.at/things?w=1600&h=980&txt=0&random=201" alt=""> 
     <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-fade uk-flex uk-flex-bottom"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit consequuntur. 
     </figcaption> 
     <a class="uk-position-cover"></a> 
    </figure> 
    </div> 
    <div class="item"> 
    <figure class="uk-overlay uk-overlay-hover"> 
     <img src="https://placem.at/things?w=1600&h=980&txt=0&random=202" alt=""> 
     <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-fade uk-flex uk-flex-bottom"> 
     Suscipit blanditiis quos aspernatur minus optio beatae consectetur quidem accusantium rerum ab sed nisi. 
     </figcaption> 
     <a class="uk-position-cover"></a> 
    </figure> 
    </div> 
    <div class="item"> 
    <figure class="uk-overlay uk-overlay-hover"> 
     <img src="https://placem.at/things?w=1600&h=980&txt=0&random=203" alt=""> 
     <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-fade uk-flex uk-flex-bottom"> 
     Culpa consequuntur necessitatibus laboriosam, quas quos odit non unde consequatur fugit rerum incidunt. 
     </figcaption> 
     <a class="uk-position-cover"></a> 
    </figure> 
    </div> 
</div> 

Was erzielen:

Ich möchte ein 3 zufällige box-shadow Farben erstellen (nur) über zu jeder (10 Daumen) von .item Klasse.

Foto Abb.1

Answer 1

Sie können eine Variable Zeichenfolge erstellen Alphabete von A durch F und Zahlen 0 durch 9 verwenden String.prototype.concat() und Array.from() verketten zufällige Zeichen von String-Variablen enthalten box-shadow von Elementen zu setzen .

$(function() { 
 
    var base = ['#00A9E0', '#E82425', '#EFB12A']; 
 
    var shadow = "0 0 0 5px "; 
 

 
    function randomColor() { 
 
    return shadow + base[Math.floor(Math.random() * base.length)] 
 
    } 
 
    
 
    $(".item").each(function() { 
 
    $(this).css("boxShadow", randomColor()) 
 
    }) 
 
})

.item { 
 
    width: 50px; 
 
    height: 50px; 
 
    display: inline-block; 
 
    margin: 8px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<div class="item">1</div> 
 
<div class="item">2</div> 
 
<div class="item">3</div> 
 
<div class="item">4</div> 
 
<div class="item">5</div> 
 
<div class="item">6</div> 
 
<div class="item">7</div> 
 
<div class="item">8</div> 
 
<div class="item">9</div> 
 
<div class="item">10</div>

Answer 2

BoxShadow = function() { 
 
    var hfiColors = ['#00A9E0', '#E82425', '#EFB12A']; 
 
    var colors = hfiColors.slice(0); 
 

 
    $('.program-gallery .item img').each(function(){ 
 
    var colorIndex = Math.floor(Math.random() * colors.length);  
 
    $(this).css('box-shadow', '0 0 0 5px' + colors.splice(colorIndex, 1)); 
 
    }); 
 
} 
 
$(document).ready(BoxShadow);

.item { width: 30%; display: inline-block; vertical-align:top; } 
 
img { max-width: 100% }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="program-gallery"> 
 
    <div class="item"> 
 
    <figure class="uk-overlay uk-overlay-hover"> 
 
     <img src="https://placem.at/things?w=1600&h=980&txt=0&random=201" alt=""> 
 
     <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-fade uk-flex uk-flex-bottom"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit consequuntur. 
 
     </figcaption> 
 
     <a class="uk-position-cover"></a> 
 
    </figure> 
 
    </div> 
 
    <div class="item"> 
 
    <figure class="uk-overlay uk-overlay-hover"> 
 
     <img src="https://placem.at/things?w=1600&h=980&txt=0&random=202" alt=""> 
 
     <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-fade uk-flex uk-flex-bottom"> 
 
     Suscipit blanditiis quos aspernatur minus optio beatae consectetur quidem accusantium rerum ab sed nisi. 
 
     </figcaption> 
 
     <a class="uk-position-cover"></a> 
 
    </figure> 
 
    </div> 
 
    <div class="item"> 
 
    <figure class="uk-overlay uk-overlay-hover"> 
 
     <img src="https://placem.at/things?w=1600&h=980&txt=0&random=203" alt=""> 
 
     <figcaption class="uk-overlay-panel uk-overlay-background uk-overlay-fade uk-flex uk-flex-bottom"> 
 
     Culpa consequuntur necessitatibus laboriosam, quas quos odit non unde consequatur fugit rerum incidunt. 
 
     </figcaption> 
 
     <a class="uk-position-cover"></a> 
 
    </figure> 
 
    </div> 
 
</div>

Aktualisieren Sie Ihre Codes abit. Und ein paar CSS für Visuals hinzugefügt.

$('.program-gallery .item img').each(function(){ 
// I targeted each image instead of `.item` 

Statt mit Ihrem Array in Scheiben schneiden und concat ein Element aus, es zu entfernen, nur splice verwenden:

$(this).css('box-shadow', '0 0 0 5px' + colors.splice(colorIndex, 1));