boas pessoal estou aqui com uma dificuldade na elaboração de um slide show para um site
Código :
Gostava de saber como posso por este slide aparecer os números das imagens e ao clicar nelas aparecer a imagem referente sem ser pelos botões de antes e próxima imagem
Se me poderem dar aqui uma ajuda agradecia![;)]()
Código :
<style type="text/css">
.efet {
-webkit-transition:all ease-out 0.5s;
-moz-transition:all ease-out 0.5s;
-o-transition:all ease-out 0.5s;
-ms-transition:all ease-out 0.5s;
transition:all ease-out 0.5s;
}
#slider {
position: absolute;
z-index: 1;
}
#slider a { position: absolute; top: 0; left: 0; opacity: 0;filter:alpha(opacity=0);}
.ativo {opacity: 1!important; filter:alpha(opacity=100)!important;}
span {background: #0190EE; cursor: pointer; opacity: 0;filter:alpha(opacity=0); position: absolute; bottom: 40%; width: 43px; height: 43px; z-index: 5;}
figure:hover span {opacity: 0.76;filter:alpha(opacity=76);}
figure {
max-width: 937px;
height: 354px;
position: relative;
overflow: hidden;
margin: 50px auto;
}
</style>
</head>
<body>
<figure>
<div >
<a href="#" class="prev"> < </a><a href="#" class="next"> > </a></div>
<div id="slider">
<a href="#" id="1" class="efet"><img src="imagem1.jpg"/></a>
<a href="#" id="2" class="efet"><img src="imagem2.jpg"/></a>
<a href="#" id="3" class="efet"><img src="imagem2.jpg"/></a>
</div>
<!-- !-->
</figure>
<script type="text/javascript">
function setaImagem(){
var settings = {
primeiraImg: function(){
elemento = document.querySelector("#slider a:first-child");
elemento.classList.add("ativo");
},
ultimaImg: function(){
elemento = document.querySelector("#slider a:last-child");
elemento.classList.add("ativo");
},
slide: function(){
elemento = document.querySelector(".ativo");
if(elemento.nextElementSibling){
elemento.nextElementSibling.classList.add("ativo");
elemento.classList.remove("ativo");
}else{
elemento.classList.remove("ativo");
settings.primeiraImg();
}
},
proximo: function(){
clearInterval(intervalo);
elemento = document.querySelector(".ativo");
if(elemento.nextElementSibling){
elemento.nextElementSibling.classList.add("ativo");
elemento.classList.remove("ativo");
}else{
elemento.classList.remove("ativo");
settings.primeiraImg();
}
intervalo = setInterval(settings.slide,4000);
},
anterior: function(){
clearInterval(intervalo);
elemento = document.querySelector(".ativo");
if(elemento.previousElementSibling){
elemento.previousElementSibling.classList.add("ativo");
elemento.classList.remove("ativo");
}else{
elemento.classList.remove("ativo");
elemento = document.querySelector("a:last-child");
settings.ultimaImg();
}
intervalo = setInterval(settings.slide,4000);
},
}
//chama o slide
settings.primeiraImg();
//chama o slide à um determinado tempo
var intervalo = setInterval(settings.slide,4000);
document.querySelector(".next").addEventListener("click",settings.proximo,false);
document.querySelector(".prev").addEventListener("click",settings.anterior,false);
}
window.addEventListener("load",setaImagem,false);
</script>
.efet {
-webkit-transition:all ease-out 0.5s;
-moz-transition:all ease-out 0.5s;
-o-transition:all ease-out 0.5s;
-ms-transition:all ease-out 0.5s;
transition:all ease-out 0.5s;
}
#slider {
position: absolute;
z-index: 1;
}
#slider a { position: absolute; top: 0; left: 0; opacity: 0;filter:alpha(opacity=0);}
.ativo {opacity: 1!important; filter:alpha(opacity=100)!important;}
span {background: #0190EE; cursor: pointer; opacity: 0;filter:alpha(opacity=0); position: absolute; bottom: 40%; width: 43px; height: 43px; z-index: 5;}
figure:hover span {opacity: 0.76;filter:alpha(opacity=76);}
figure {
max-width: 937px;
height: 354px;
position: relative;
overflow: hidden;
margin: 50px auto;
}
</style>
</head>
<body>
<figure>
<div >
<a href="#" class="prev"> < </a><a href="#" class="next"> > </a></div>
<div id="slider">
<a href="#" id="1" class="efet"><img src="imagem1.jpg"/></a>
<a href="#" id="2" class="efet"><img src="imagem2.jpg"/></a>
<a href="#" id="3" class="efet"><img src="imagem2.jpg"/></a>
</div>
<!-- !-->
</figure>
<script type="text/javascript">
function setaImagem(){
var settings = {
primeiraImg: function(){
elemento = document.querySelector("#slider a:first-child");
elemento.classList.add("ativo");
},
ultimaImg: function(){
elemento = document.querySelector("#slider a:last-child");
elemento.classList.add("ativo");
},
slide: function(){
elemento = document.querySelector(".ativo");
if(elemento.nextElementSibling){
elemento.nextElementSibling.classList.add("ativo");
elemento.classList.remove("ativo");
}else{
elemento.classList.remove("ativo");
settings.primeiraImg();
}
},
proximo: function(){
clearInterval(intervalo);
elemento = document.querySelector(".ativo");
if(elemento.nextElementSibling){
elemento.nextElementSibling.classList.add("ativo");
elemento.classList.remove("ativo");
}else{
elemento.classList.remove("ativo");
settings.primeiraImg();
}
intervalo = setInterval(settings.slide,4000);
},
anterior: function(){
clearInterval(intervalo);
elemento = document.querySelector(".ativo");
if(elemento.previousElementSibling){
elemento.previousElementSibling.classList.add("ativo");
elemento.classList.remove("ativo");
}else{
elemento.classList.remove("ativo");
elemento = document.querySelector("a:last-child");
settings.ultimaImg();
}
intervalo = setInterval(settings.slide,4000);
},
}
//chama o slide
settings.primeiraImg();
//chama o slide à um determinado tempo
var intervalo = setInterval(settings.slide,4000);
document.querySelector(".next").addEventListener("click",settings.proximo,false);
document.querySelector(".prev").addEventListener("click",settings.anterior,false);
}
window.addEventListener("load",setaImagem,false);
</script>
Gostava de saber como posso por este slide aparecer os números das imagens e ao clicar nelas aparecer a imagem referente sem ser pelos botões de antes e próxima imagem
Se me poderem dar aqui uma ajuda agradecia
