<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
border: 1px solid #ccc;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button3 {width: 100%;}
</style>
</head>
<body>
<div class="responsive">
<div class="gallery">
<img id="img1" src="" alt="Cinque Terre" width="600" height="400">
</div>
</div>
<div class="responsive">
<div class="gallery">
<img id="img2" src="" alt="Forest" width="600" height="400">
</div>
</div>
<div class="responsive">
<div class="gallery">
<img id="img3" src="" alt="Northern Lights" width="600" height="400">
</div>
</div>
<div class="responsive">
<div class="gallery">
<img id="img4" src="" alt="Mountains" width="600" height="400">
</div>
</div>
<div class="clearfix"></div>
<button onclick="swap()" class="button button3">SWAP</button>
<script>
function shuffle(arra1) {
var ctr = arra1.length, temp, index;
// While there are elements in the array
while (ctr > 0) {
// Pick a random index
index = Math.floor(Math.random() * ctr);
// Decrease ctr by 1
ctr--;
// And swap the last element with it
temp = arra1[ctr];
arra1[ctr] = arra1[index];
arra1[index] = temp;
}
return arra1;
}
function addImg(arra1){
document.getElementById("img1").src=arra1[0];
document.getElementById("img2").src=arra1[1];
document.getElementById("img3").src=arra1[2];
document.getElementById("img4").src=arra1[3];
}
var myArray = ["https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRIPU7PjSiqAsIGGadYvP_YzcHZ2oeDMvMOfmczoTwBvwlc3e3BhA&s", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTC9Tmy1LfVmXlgbyngqPN8uVCDk5urRwPjHa3sfExzhFJZ1SKRCg&s", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRt54JZ5Uh74Xbyg1p8Yfu-psDjugvwc-7-s539-mne94ZdOlgV&s", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvA-pCWL3nZ1IdbPNhxhHubEQBXr_AgxPssBpJDAEkTPl94NMJTg&s"];
addImg(myArray);
function swap(){
shuffle(myArray);
addImg(myArray);
}
</script>
</body>
</html>
RUN CODE
No comments:
Post a Comment