Spider Design: Slide Com Menu em Forma De Números

Slide Com Menu em Forma De Números

Descricao: Daew Galera,
Bom hoje eu estarei postando o tutorial de como fazer o slide com menu em formas de números, me pediram para fazer isso e hoje eu estarei mostrando.

Bom, Vamos Começar:

Faça o Login -> Editar Html -> Procure Por ]]></b:skin>

Antes de ]]></b:skin> Cole o Código Abaixo:

/* Slide

----------------------------------------------- */

.main_view {

float: left;

position: relative;

}

.window {

height:300px; /*ALTURA DAS IMAGENS-- */

width: 980px; /*LARGURA DAS IMAGENS-- */

border:1px solid #04272D;

overflow: hidden;

position: relative;

margin: 0 0 20px 0;

}

.image_reel {

position: absolute;

top: 0; left: 0;

}

.image_reel img {

float: left;

}

.paging {

position: absolute;

bottom: 30px;

right: -1px;

width: 400px;

height:41px;

z-index: 100;

text-align: center;

line-height: 40px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq3fDJEDaEZwGmZpIGe712ciEwufLqJXG12boJ7PntswGE9I94z1Am1CW6yn2WswMHiV9iIkXx7T9j3l8J7hZ94WZoGYtztUZBcAGwpkgeog0A2q0jvRz8yVzAy8Cgux7oYquy93Lb6wjO/s0/transparencia.png);

-moz-border-radius-topleft: 25px;

-moz-border-radius-bottomleft: 25px;

-webkit-border-radius-bottomleft: 25px;

-webkit-border-radius-topleft: 25px;

border:1px solid #000;

display: none;

}

.paging a {

outline:none;

padding: 5px 10px;

text-decoration: none;

color: #999;

background: #000;border: 1px solid #000;

-moz-border-radius: 17px;

-khtml-border-radius: 17px;

-webkit-border-radius: 17px;

}

.paging a.active {

font-weight: bold;

border: 1px solid #000;

color: #fff;

background: #188696;/*COR DE FUNDO DOS NUMEROS ATIVOS*/

-moz-border-radius: 17px;

-khtml-border-radius: 17px;

-webkit-border-radius: 17px;

}

.paging a:hover {

font-weight: bold;

}

Os Numeros que Estão em Vermelho Define o Tamanho do Slide

Os números em azul representam a barra com os números.

O número em rosa representa a cor selecionada no menu em números.

Agora Logo depois de ]]></b:skin> Cole o Seguinte Código:

$(document).ready(function() {

//Set Default State of each portfolio piece

$(".paging").show();

$(".paging a:first").addClass("active");

//Get size of images, how many there are, then determin the size of the image reel.

var imageWidth = $(".window").width();

var imageSum = $(".image_reel img").size();

var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size

$(".image_reel").css({'width' : imageReelWidth});

//Paging + Slider Function

rotate = function(){

var triggerID = $active.attr("rel") - 1; //Get number of times to slide

var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

$(".paging a").removeClass('active'); //Remove all active class

$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

//Slider Animation

$(".image_reel").animate({

left: -image_reelPosition

}, 500 );

};

//Rotation + Timing Event

rotateSwitch = function(){

play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds

$active = $('.paging a.active').next();

if ( $active.length === 0) { //If paging reaches the end...

$active = $('.paging a:first'); //go back to first

}

rotate(); //Trigger the paging and slider function

}, 7000); //Timer speed in milliseconds (3 seconds)

};

rotateSwitch(); //Run function on launch

//On Hover

$(".image_reel a").hover(function() {

clearInterval(play); //Stop the rotation

}, function() {

rotateSwitch(); //Resume rotation

});

//On Click

$(".paging a").click(function() {

$active = $(this); //Activate the clicked paging

//Reset Timer

clearInterval(play); //Stop the rotation

rotate(); //Trigger rotation immediately

rotateSwitch(); // Resume rotation

return false; //Prevent browser jump to link anchor

});

</script>

Agora Procure Por <div id='content-wrapper'>

E cole o próximo código abaixo dele, fazendo as modificações necessárias.

</div></div>

</div>

</div></div>

Os Números em Vermelho São o Tamanho Das Imagens.

Você Também Pode Adicionar o último código no gadget "Html/Javascript".

Dúvidas? Comentem, siga o site ;)

OBS: Se Copiar Essa Postagem Coloque o Credito
( by: Leonardo Spider Design)

Vlw Galera e Até a Próxima.

Categorias

Slide Com Menu em Forma De Números

Parceiros

Parceiros Link