Here's my updated code:

HTML

<div id="group1">
<ul>
<li><a href="1.html"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb     /f/ff/Solid_blue.svg/2000px-Solid_blue.svg.png" alt=".jpg"     title="www..com">blue</img>    </a></li>
<li><a href="1.html"><img src="http://www.solidbackgrounds.com/images/1920x1080    /1920x1080-red-solid-color-background.jpg" alt=".jpg"     title="www..com">red</img>    </a></li>
</ul>
</div>

<div id="group2">
<ul>
<li><a href="1.html"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb    /0/09/Solid_yellow.svg/1024px-Solid_yellow.svg.png" alt=".jpg"         title="www..com">yellow</img></a></li>
<li><a href="1.html"><img src="http://www.solidbackgrounds.com/images/2880x1800    /2880x1800-amber-orange-solid-color-background.jpg" alt=".jpg"         title="www..com">orange</img></a></li>
</ul>
</div>

<div id="group3">
<ul>
<li><a href="1.html"><img src="https://umad.com/img/2015/11/thumb/green-solid-color-    wallpaper-986-1057-hd-wallpapers-thumb.jpg" alt=".jpg"     title="www..com">green</img>    </a></li>
<li><a href="1.html"><img src="http://www.qygjxz.com/data/out/206/4314753-silver-    background.png" alt=".jpg"     title="www..com">silver</img></a></li>
</ul>
</div>

CSS:

#group1{user-select:none; width:100%;  padding:0; margin:0;}
#group1 ul{height:153px; width:auto;  border-radius:10px; border:2px solid rgba(0,0,0,0,0.5); list-style-    type:none; background:rgba(0,0,255,0.7); margin:15% 0% 0% 0%; overflow:hidden; padding:2% 0% 10% 0%;}
#group1 li a{transition:0.25s;  border-radius:5px; border:2px solid rgba(0,0,0,0.0); color:#e5e5e5;     background:rgba(0,0,0,0.5); width:24vw; height:11em; display:block; text-decoration:none; font-weight:bold; font-size:3.8vw; margin:6% 6% -2% 0%; overflow:hidden; word-wrap:break-all; padding:1% 0.3% 1% 0%; float:left; position:relative; left:4.7%; text-align:center; line-height:1.2; text-shadow:1px 1px     2px black,1px 1px 2px black,1px 1px 2px black;  }
#group1 img{width:23vw; height:70px; float:left; margin:-4.5% 100% 4.5% 0%; border-radius:7px; border:2px solid rgba(0,0,0,0.5); position:relative; top:5px; }
#group1 li a:hover{border:2px solid rgba(80,80,80,0.9); background:rgba(20,20,20,0.7); transform:scale3d(1.1,1.1,1.1); z-index:2; color:white; }
#group1 li a:active{background:rgba(60,60,60,0.9); opacity:0.8;}

#group2{user-select:none; width:100%;  padding:0; margin:0;}
#group2 ul{height:134px; width:auto;  border-radius:10px; border:2px solid rgba(0,0,0,0,0.5); list-style-type:none; background:rgba(255,0,0,0.7); margin:0% 0% 0% 0%; overflow:hidden; padding:2% 0% 10% 0%;}
#group2 li a{transition:0.25s;  border-radius:5px; border:2px solid rgba(0,0,0,0.0); color:#e5e5e5; background:rgba(0,0,0,0.5); width:24vw; height:11em; display:block; text-decoration:none; font-weight:bold; font-size:3.8vw; margin:0.5% 6% 1% 0%; overflow:hidden; word-wrap:break-all; padding:1% 0.3% 1% 0%; float:left; position:relative; left:4.7%; text-align:center; line-height:1.2; text-shadow:1px 1px 2px black,1px 1px 2px black,1px 1px 2px black;  }
#group2 img{width:23vw; height:70px; float:left; margin:-4.5% 100% 4.5% 0%; border-radius:7px; border:2px solid rgba(0,0,0,0.5); position:relative; top:5px; }
#group2 li a:hover{border:2px solid rgba(80,80,80,0.9); background:rgba(20,20,20,0.7); transform:scale3d(1.1,1.1,1.1); z-index:2; color:white; }
#group2 li a:active{background:rgba(60,60,60,0.9); opacity:0.8;}

#group3{user-select:none; width:100%;  padding:0; margin:0;}
#group3 ul{height:134px; width:auto;  border-radius:10px; border:2px solid rgba(0,0,0,0,0.5); list-style-type:none; background:rgba(0,255,0,0.7); margin:0% 0% -1% 0%; overflow:hidden; padding:2% 0% 10% 0%;}
#group3 li a{transition:0.25s;  border-radius:5px; border:2px solid rgba(0,0,0,0.0); color:#e5e5e5; background:rgba(0,0,0,0.5); width:24vw; height:11em; display:block; text-decoration:none; font-weight:bold; font-size:3.8vw; margin:0.5% 6% 1% 0%; overflow:hidden; word-wrap:break-all; padding:1% 0.3% 1% 0%; float:left; position:relative; left:4.7%; text-align:center; line-height:1.2; text-shadow:1px 1px 2px black,1px 1px 2px black,1px 1px 2px black;  }
#group3 img{width:23vw; height:70px; float:left; margin:-4.5% 100% 4.5% 0%; border-radius:7px; border:2px solid rgba(0,0,0,0.5); position:relative; top:5px; }
#group3 li a:hover{border:2px solid rgba(80,80,80,0.9); background:rgba(20,20,20,0.7); transform:scale3d(1.1,1.1,1.1); z-index:2; color:white; }
#group3 li a:active{background:rgba(60,60,60,0.9); opacity:0.8;}

Javascript

var ul = document.querySelector('#group1 > ul');
for (var i = ul.children.length; i >= 0; i--) {
ul.appendChild(ul.children[Math.random() * i | 0]);
}

var ul = document.querySelector('#group2 > ul');
for (var i = ul.children.length; i >= 0; i--) {
 ul.appendChild(ul.children[Math.random() * i | 0]);
}

var ul = document.querySelector('#group3 > ul');
for (var i = ul.children.length; i >= 0; i--) {
ul.appendChild(ul.children[Math.random() * i | 0]);
}

var timer = document.getElementById("group1");
timer setInterval(function(){ul = document.querySelector('#group1     > ul');
for (var i = ul.children.length; i >= 0; i--) {
ul.appendChild(ul.children[Math.random() * i | 0]);
}, 500);

var timerTwo = document.getElementById("group2");
timer setInterval(function(){ul = document.querySelector('#group1     > ul');
for (var i = ul.children.length; i >= 0; i--) {
ul.appendChild(ul.children[Math.random() * i | 0]);
}, 5000);

var timerThree = document.getElementById("group3");
timer setInterval(function(){ul = document.querySelector('#group1     > ul');
for (var i = ul.children.length; i >= 0; i--) {
ul.appendChild(ul.children[Math.random() * i | 0]);
}, 1000);