Automatic image traversal of a gallery with Opacity effect

Question

I have a small gallery of images next to each other it already has opacity 0.1 and when passing the mouse over one of the images the opacity effect becomes clearer 1.0 only I want to be made an automatic change of the images keeping the opacity my gallery is at the footer of my page wanted it to be like a slide shows.

would have like to be done with java script follow my code below

#footer {height: 71px;background-color: #000;overflow: visible;background-repeat: repeat-x;border-top: 1px solid #000;}
#photos {position: relative;}
#photos ul {margin:0px;padding:0px;list-style:none;}
#photos ul li {width:71px;height:71px;float:left;opacity:0.2;webkit-transform:translatez(0);-webkit-transition:all 500ms cubic-bezier(0.165,0.840,0.440,1.000);-moz-transition:all 500ms cubic-bezier(0.165,0.840,0.440,1.000);-o-transition:all 500ms cubic-bezier(0.165,0.840,0.440,1.000);transition:all 500ms cubic-bezier(0.165,0.840,0.440,1.000);-webkit-transition-timing-function:cubic-bezier(0.165,0.840,0.440,1.000);-moz-transition-timing-function:cubic-bezier(0.165,0.840,0.440,1.000);-o-transition-timing-function:cubic-bezier(0.165,0.840,0.440,1.000);transition-timing-function:cubic-bezier(0.165,0.840,0.440,1.000);}
#photos ul li:hover {opacity:1;webkit-transform:translatez(0);-webkit-transition:all 500ms cubic-bezier(0.165,0.840,0.440,1.000);-moz-transition:all 500ms cubic-bezier(0.165,0.840,0.440,1.000);-o-transition:all 500ms cubic-bezier(0.165,0.840,0.440,1.000);transition:all 500ms cubic-bezier(0.165,0.840,0.440,1.000);-webkit-transition-timing-function:cubic-bezier(0.165,0.840,0.440,1.000);-moz-transition-timing-function:cubic-bezier(0.165,0.840,0.440,1.000);-o-transition-timing-function:cubic-bezier(0.165,0.840,0.440,1.000);transition-timing-function:cubic-bezier(0.165,0.840,0.440,1.000);}
#photos ul li a {width:71px;height:71px;float:left;}
#photos ul li a img {float: left;width: 71px;height: 71px;}

<section id="footer"><div id="photos"><ul>
  <li><a href="#" target="_blank"><img src="http://www.megaki.com.br//img.mgk.com.br/img-teste/myidol-icone.jpg" alt=""></a></li>
  <li><a href="#" target="_blank"><img src="http://www.megaki.com.br//img.mgk.com.br/img-teste/levitagram-icone.png" alt=""></a></li>
  <li><a href="#" target="_blank"><img src="http://www.megaki.com.br//img.mgk.com.br/img-teste/retrica-icone.jpg" alt=""></a></li>
  <li><a href="#" target="_blank"><img src="http://www.megaki.com.br//img.mgk.com.br/img-teste/scr-recorder-android-icone.jpg" alt=""></a></li>
  <li><a href="#" target="_blank"><img src="http://www.megaki.com.br//img.mgk.com.br/img-teste/stickered-for-messenger-icone.png" alt=""></a></li>
  <li><a href="#" target="_blank"><img src="http://www.megaki.com.br//img.mgk.com.br/img-teste/adobe-photoshop-cc-icone.png" alt=""></a></li>
  <li><a href="#" target="_blank"><img src="http://www.megaki.com.br//img.mgk.com.br/img-teste/43500000.jpg" alt=""></a></li>
  <li><a href="#" target="_blank"><img src="http://www.megaki.com.br//img.mgk.com.br/img-teste/easydowloader-for-instagram-icone_002.png" alt=""></a></li>
  <li><a href="#" target="_blank"><img src="http://www.megaki.com.br//img.mgk.com.br/img-teste/d24018d8012d202912313b012911.jpg" alt=""></a></li>
 


  </ul></div></section>

Answer 1

good since I did not get an answer on how to do the automatic exchange of an image in a gallery I decided to try and write a little bit I made a script that fits very well what I wanted below the code already ready

var index = 1; var menu_time = 1000; var anterior = 1; var timer = setTimeout('trocaMsg()',menu_time); 
function trocaMsg() { index = index%22 +1; channel(index); tempo(); }          
function tempo() { clearTimeout(timer);	timer = setTimeout("trocaMsg()",menu_time);}  
function channel(id) { index = id; document.getElementById("tvn" + anterior).className= "transp"; document.getElementById("tvn" + id).className = "opac"; document.getElementById('tvshow').innerHTML=document.getElementById('tvn' + id).innerHTML;	anterior = id;}
function tvch(id, out) {if (out == 1)	{ clearTimeout(timer);	channel(id);} else { tempo();}} 

#galeria {width: 100%;position: relative;overflow: hidden;background-color: #000;height: 71px;border-top: 1px solid #000;}

#galeria #nav img {cursor: pointer;width: 71px;height: 71px;float: left;}

#galeria .transp {
opacity:0.3;webkit-transform:translatez(0);-webkit-transition:all 500ms cubic-bezier(0.165,0.840,0.440,1.000);-moz-transition:all 500ms cubic-bezier(0.165,0.840,0.440,1.000);-o-transition:all 500ms cubic-bezier(0.165,0.840,0.440,1.000);transition:all 500ms cubic-bezier(0.165,0.840,0.440,1.000);-webkit-transition-timing-function:cubic-bezier(0.165,0.840,0.440,1.000);-moz-transition-timing-function:cubic-bezier(0.165,0.840,0.440,1.000);-o-transition-timing-function:cubic-bezier(0.165,0.840,0.440,1.000);transition-timing-function:cubic-bezier(0.165,0.840,0.440,1.000);}

#galeria .opac {opacity: 1;webkit-transform: translatez(0);-webkit-transition: all 500ms cubic-bezier(0.165,0.840,0.440,1.000);-moz-transition: all 500ms cubic-bezier(0.165,0.840,0.440,1.000);
-o-transition: all 500ms cubic-bezier(0.165,0.840,0.440,1.000);transition: all 500ms cubic-bezier(0.165,0.840,0.440,1.000);
-webkit-transition-timing-function: cubic-bezier(0.165,0.840,0.440,1.000);-moz-transition-timing-function: cubic-bezier(0.165,0.840,0.440,1.000);
-o-transition-timing-function: cubic-bezier(0.165,0.840,0.440,1.000);transition-timing-function: cubic-bezier(0.165,0.840,0.440,1.000);}

<div id="galeria"><div id="tvshow" style="display:none;"></div>
  <div id="nav">
  <a href="#"><img id="tvn1" class="opac" src="http://www.megaki.com.br/img.mgk.com.br/img-teste/myidol-icone.jpg" onmouseover="tvch(1,1)" onmouseout="tvch(1,0)" /></a>
  <a href="#"><img id="tvn2" class="transp" src="http://www.megaki.com.br/img.mgk.com.br/img-teste/levitagram-icone.png" onmouseover="tvch(2,1)" onmouseout="tvch(2,0)" /></a>
  <a href="#"><img id="tvn3" class="transp" src="http://www.megaki.com.br/img.mgk.com.br/img-teste/adobe-photoshop-cc-icone.png" onmouseover="tvch(3,1)" onmouseout="tvch(3,0)" /></a>
  <a href="#"><img id="tvn4" class="transp" src="http://www.megaki.com.br/img.mgk.com.br/img-teste/retrica-icone.jpg" onmouseover="tvch(4,1)" onmouseout="tvch(4,0)" /></a>
  <a href="#"><img id="tvn5" class="transp" src="http://www.megaki.com.br/img.mgk.com.br/img-teste/scr-recorder-android-icone.jpg" onmouseover="tvch(5,1)" onmouseout="tvch(5,0)" /></a>
  <a href="#"><img id="tvn6" class="transp" src="http://www.megaki.com.br/img.mgk.com.br/img-teste/myidol-icone.jpg" onmouseover="tvch(6,1)" onmouseout="tvch(6,0)" /></a>
  <a href="#"><img id="tvn7" class="transp" src="http://www.megaki.com.br/img.mgk.com.br/img-teste/levitagram-icone.png" onmouseover="tvch(7,1)" onmouseout="tvch(7,0)" /></a>
  <a href="#"><img id="tvn8" class="transp" src="http://www.megaki.com.br/img.mgk.com.br/img-teste/4shared-icone.jpg" onmouseover="tvch(8,1)" onmouseout="tvch(8,0)" /></a>
  <a href="#"><img id="tvn9" class="transp" src="http://www.megaki.com.br/img.mgk.com.br/img-teste/cf3088d9012fe381123139268817.jpg" onmouseover="tvch(9,1)" onmouseout="tvch(9,0)" /></a>
  <a href="#"><img id="tvn10" class="transp" src="http://www.megaki.com.br/img.mgk.com.br/img-teste/d24018d8012d202912313b012911.jpg" onmouseover="tvch(10,1)" onmouseout="tvch(10,0)" /></a>
  <a href="#"><img id="tvn11" class="transp" src="http://www.megaki.com.br/img.mgk.com.br/img-teste/levitagram-icone.png" onmouseover="tvch(11,1)" onmouseout="tvch(11,0)" /></a>
  <a href="#"><img id="tvn12" class="transp" src="http://www.megaki.com.br/img.mgk.com.br/img-teste/3189689-198492-298.jpg" onmouseover="tvch(12,1)" onmouseout="tvch(12,0)" /></a>
  <a href="#"><img id="tvn13" class="transp" src="http://www.megaki.com.br/img.mgk.com.br/img-teste/adobe-photoshop-cc-icone.png" onmouseover="tvch(13,1)" onmouseout="tvch(13,0)" /></a>
  <a href="#"><img id="tvn14" class="transp" src="http://www.megaki.com.br/img.mgk.com.br/img-teste/1788014918-t200.jpg" onmouseover="tvch(14,1)" onmouseout="tvch(14,0)" /></a>
  <a href="#"><img id="tvn15" class="transp" src="http://www.megaki.com.br/img.mgk.com.br/img-teste/4shared-icone.jpg" onmouseover="tvch(15,1)" onmouseout="tvch(15,0)" /></a>
  <a href="#"><img id="tvn16" class="transp" src="http://www.megaki.com.br/img.mgk.com.br/img-teste/retrica-icone.jpg" onmouseover="tvch(16,1)" onmouseout="tvch(16,0)" /></a>
  <a href="#"><img id="tvn17" class="transp" src="http://www.megaki.com.br/img.mgk.com.br/img-teste/myidol-icone.jpg" onmouseover="tvch(17,1)" onmouseout="tvch(17,0)" /></a>
  <a href="#"><img id="tvn18" class="transp" src="http://www.megaki.com.br/img.mgk.com.br/img-teste/1949315112531-t200.jpg" onmouseover="tvch(18,1)" onmouseout="tvch(18,0)" /></a>
  <a href="#"><img id="tvn19" class="transp" src="http://www.megaki.com.br/img.mgk.com.br/img-teste/2233997-198449-530.jpg" onmouseover="tvch(19,1)" onmouseout="tvch(19,0)" /></a>
  <a href="#"><img id="tvn20" class="transp" src="http://www.megaki.com.br/img.mgk.com.br/img-teste/165345.jpg" onmouseover="tvch(20,1)" onmouseout="tvch(20,0)" /></a>
  <a href="#"><img id="tvn21" class="transp" src="http://www.megaki.com.br/img.mgk.com.br/img-teste/3181971-198473-530.jpg" onmouseover="tvch(21,1)" onmouseout="tvch(21,0)" /></a>
  <a href="#"><img id="tvn22" class="transp" src="http://www.megaki.com.br/img.mgk.com.br/img-teste/4shared-icone.jpg" onmouseover="tvch(22,1)" onmouseout="tvch(22,0)" /></a>
    </div> 
   
     
</div>