2

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>

1 Resposta 1

1

bom já que não obtive uma resposta sobre como fazer o troca automática de uma imagem numa galeria eu mesmo resolvi tenta fazer e escrevendo um pouquinho fiz um script que atende muito bem o que eu queria segue abaixo o código já pronto

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .