Tenho uma pequena galeria de imagens uma do lado da outra ela já tem opacidade 0.1 e o ao passar o mouse sobre uma das imagens o efeito opacidade fica mais claro 1.0 só que quero que seja feito uma mudança automática das imagens mantendo a opacidade minha galeria fica no rodapé da minha pagina queria que fosse tipo um Slide shows.
teria como ser feito com java script segue meu código abaixo
#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>