machen Javascript Bild Randomizer mit CSS ansprechen?

Question

Ich bin ein Front-End-Webdesigner mit wirklich wenig Verständnis von Javascript, aber ich wollte eine Javascript-basierte Bild Randomizer (wo das Bild würde jedes Mal geändert, wenn der Benutzer die Seite aktualisiert) aber das einzige Problem ist ich bin mir wirklich nicht sicher, wie ich das Element über CSS reaktionsfähig machen kann. Ich bin mir nicht einmal sicher, ob es an dieser Stelle möglich ist, aber ich habe versucht, das Skript in divs einzufügen und dem img-Tag eine Klasse hinzuzufügen und das CSS hinzuzufügen, und nichts scheint zu funktionieren.

Das Skript selbst, das ich fand, funktioniert gut, aber ich muss in der Lage sein, Stile (besonders reaktionsschnelle Stile!) Darauf anzuwenden und ich bin nur wirklich ratlos.

Hier ist das Skript selbst:

<script type="text/javascript"> 
     var total_images = 3; 
     var random_number = Math.floor((Math.random()*total_images)); 
     var random_img = new Array(); 
     random_img[0] = '<a href="page1.html"><img class="center" src="red.png"></a>'; 
     random_img[1] = '<a href="page2.html"><img class="center" src="blue.png"></a>'; 
     random_img[2] = '<a href="page3.html"><img class="center" src="placeholderbanner.png"></a>'; 
     document.write(random_img[random_number]); 
     </script> 

Hat jemand ein paar gute Ratschläge darüber, wie diese gehen zu tun? Ich würde wirklich jede Hilfe schätzen, die ich bekommen kann!

Answer 1

fügen Sie einfach die unten an deine CSS oder setzen es in Tags

.center { 
     float: left; 
     max-width: 100%; 
    }