I have a slideShow that I'm developing.
Images , they are in display:none and when I click on the arrows, I make display: block in the image that will appear and display: none in the others. >
I would like to do 2 things:
1) A transition , type the image of the time, click on the arrows and it will scroll to left or direct , and the next / previous images go together.
2) A effect type a clarão when the image reaches its position.
Are these i possible in display:block ? How?
Here's what I have so far:
// JavaScript Document
$(document).ready(function(e) {
quantasImagens = $("div.slideShow div.boxSlide div.imagens img").length-1;
contador = 0;
$("div.slideShow div.boxSlide div.anterior").click(function() {
contador = contador==quantasImagens ? -1 : contador;
contador++;
$("div.slideShow div.boxSlide div.imagens img").css("display","none");
$("div.slideShow div.boxSlide div.imagens img").eq(contador).css("display","block");
});
$("div.slideShow div.boxSlide div.proximo").click(function() {
contador = contador==0 ? quantasImagens+1 : contador;
contador--;
$("div.slideShow div.boxSlide div.imagens img").css("display","none");
$("div.slideShow div.boxSlide div.imagens img").eq(contador).css("display","block");
});
$("div.slideShow div.contador span.contaSlide").click(function() {
index = $(this).index();
$("div.slideShow div.boxSlide div.imagens img").css("display","none");
$("div.slideShow div.boxSlide div.imagens img").eq(index).css("display","block");
});
});@charset "utf-8";
/* CSS Document */
div.slideShow {
position: relative;
width: 100%;
}
div.slideShow div.boxSlide,
div.slideShow div.contador {
position: relative;
display: block;
width: 100%;
}
div.slideShow div.boxSlide{
height:auto;
}
div.slideShow div.boxSlide div.imagens img {
width: 100%;
height: auto;
display: none;
}
div.slideShow div.boxSlide div.imagens img:first-child {
display:block;
}
div.slideShow div.boxSlide div.anterior,
div.slideShow div.boxSlide div.proximo {
position: absolute;
display: block;
top: 50%;
}
div.slideShow div.boxSlide div.anterior {
left: 10%;
}
div.slideShow div.boxSlide div.proximo {
right: 10%;
}
div.slideShow div.boxSlide div.anterior span,
div.slideShow div.boxSlide div.proximo span {
position: absolute;
display: block;
width: 30px;
height: 30px;
}
div.slideShow div.boxSlide div.anterior span.boxSpan,
div.slideShow div.boxSlide div.proximo span.boxSpan {
background-color: rgb(200,200,200);
opacity: .5;
z-index: 1;
}
div.slideShow div.boxSlide div.anterior span.setaSpan,
div.slideShow div.boxSlide div.proximo span.setaSpan {
line-height: 30px;
text-align: center;
font-weight: bolder;
cursor: pointer;
z-index: 2;
}
div.slideShow div.boxSlide div span.setaSpan:hover + span.boxSpan {
opacity: 1;
}
div.slideShow div.contador {
background-color:rgba(240,240,240,.5);
}
div.slideShow div.contador span.contaSlide {
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
background-color: rgb(200,200,200);
cursor: pointer;
opacity: .5;
}
div.slideShow div.contador span.contaSlide:hover {
opacity: 1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><divclass="slideShow">
<div class="boxSlide">
<div class="imagens">
<img src="http://hotplateprensas.com.br/estilos/_imgs/_slideShow/1.png"/><imgsrc="http://hotplateprensas.com.br/estilos/_imgs/_slideShow/2.png" />
<img src="http://hotplateprensas.com.br/estilos/_imgs/_slideShow/3.png"/></div><divclass="anterior">
<span class="setaSpan"><</span>
<span class="boxSpan"></span>
</div>
<div class="proximo">
<span class="setaSpan">></span>
<span class="boxSpan"></span>
</div>
</div>
<div class="contador">
<span class="contaSlide">1</span>
<span class="contaSlide">2</span>
<span class="contaSlide">3</span>
</div>
</div>