Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Marcos_imasters

conveter codigo jquery para js puro

Por , em Javascript

Recommended Posts

Marcos_imasters    288

Marcos_imasters
Postado 
<html>
<style>
html, body, main {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#carousel {
  position: relative;
  height: 400px;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
}
#carousel div {
  position: absolute;
  transition: transform 1s, left 1s, opacity 1s, z-index 0s;
  opacity: 1;
}
#carousel div img {
  width: 400px;
  transition: width 1s;
}
#carousel div.hideLeft {
  left: 0%;
  opacity: 0;
  transform: translateY(50%) translateX(-50%);
}
#carousel div.hideLeft img {
  width: 200px;
}
#carousel div.hideRight {
  left: 100%;
  opacity: 0;
  transform: translateY(50%) translateX(-50%);
}
#carousel div.hideRight img {
  width: 200px;
}
#carousel div.prev {
  z-index: 5;
  left: 30%;
  transform: translateY(50px) translateX(-50%);
}
#carousel div.prev img {
  width: 300px;
}
#carousel div.prevLeftSecond {
  z-index: 4;
  left: 15%;
  transform: translateY(50%) translateX(-50%);
  opacity: 0.7;
}
#carousel div.prevLeftSecond img {
  width: 200px;
}
#carousel div.selected {
  z-index: 10;
  left: 50%;
  transform: translateY(0px) translateX(-50%);
}
#carousel div.next {
  z-index: 5;
  left: 70%;
  transform: translateY(50px) translateX(-50%);
}
#carousel div.next img {
  width: 300px;
}
#carousel div.nextRightSecond {
  z-index: 4;
  left: 85%;
  transform: translateY(50%) translateX(-50%);
  opacity: 0.7;
}
#carousel div.nextRightSecond img {
  width: 200px;
}

.buttons {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
}

</style>
<body>


  <main>

    <div id="carousel">

     
       <div class="hideLeft">
        <img src="https://i1.sndcdn.com/artworks-000165384395-rhrjdn-t500x500.jpg">
      </div>

      <div class="prevLeftSecond">
        <img src="https://i1.sndcdn.com/artworks-000185743981-tuesoj-t500x500.jpg">
      </div>

      <div class="prev">
        <img src="https://i1.sndcdn.com/artworks-000158708482-k160g1-t500x500.jpg">
      </div>

      <div class="selected">
        <img src="https://i1.sndcdn.com/artworks-000062423439-lf7ll2-t500x500.jpg">
      </div>

      <div class="next">
        <img src="https://i1.sndcdn.com/artworks-000028787381-1vad7y-t500x500.jpg">
      </div>

      <div class="nextRightSecond">
        <img src="https://i1.sndcdn.com/artworks-000108468163-dp0b6y-t500x500.jpg">
      </div>

      <div class="hideRight">
        <img src="https://i1.sndcdn.com/artworks-000064920701-xrez5z-t500x500.jpg">
      </div>

    </div>

    <div class="buttons">
      <button id="prev">Prev</button>
      <button id="next">Next</button>
    </div>

  </main>
</body>
<script>
window.onload = function(){
function moveToSelected(element) {

  if (element == "next") {
  
   var selected = document.querySelector(".selected").nextElementSibling;

  } else if (element == "prev") {
 
    var selected =  document.querySelector(".selected").previousElementSibling;
  } else {
    var selected = element;
  }

  var next = selected.nextElementSibling;
  var prev = selected.previousElementSibling;
  var prevSecond = prev.previousSibling;
  var nextSecond = next.nextSibling;
  

function matches(elem, filter) {
  if (elem && elem.nodeType === 1) {
    if (filter) {
      return elem.matches(filter);
    }
    return true;
  }
  return false;
}


function getNextSiblings(elem, filter) {
  var sibs = [];
  while (elem = elem.nextSibling) {
    if (matches(elem, filter)) {
      sibs.push(elem);
    }
  }
  return sibs;
}


function getPreviousSiblings(elem, filter) {
  var sibs = [];
  while (elem = elem.previousSibling) {
    if (matches(elem, filter)) {
      sibs.push(elem);
    }
  }
  return sibs;
}



	
  selected.removeAttribute('class');
    prev.removeAttribute('class');
  next.removeAttribute('class');
    selected.classList.add("selected");
     prev.classList.add("prev");
  next.classList.add("next");


  prevSecond.removeAttribute('class');
  nextSecond.removeAttribute('class').classList.add("nextRightSecond");
prevSecond.classList.add("prevLeftSecond");
 var x = getNextSiblings(nextSecond);	

var p = getPreviousSiblings(prevSecond);
 for (var i = 0; i < x.length; i++) {
 	 x[i].removeAttribute('class');
 x[i].classList.add("hideRight");
 }
 for (var i = 0; i < p.length; i++) {
 	 p[i].removeAttribute('class');
 p[i].classList.add("hideLeft");
 }
 
  


}




document.body.addEventListener("keydown", function (e) { 
   switch(e.which) {
        case 37: // left
        moveToSelected('prev');
        break;

        case 39: // right
        moveToSelected('next');
        break;

        default: return;
    }
    e.preventDefault();
 });

document.querySelector("#carousel div").addEventListener("click", function () { 
 moveToSelected(this);
 });

document.querySelector("#prev").addEventListener("click", function () { 
  moveToSelected('prev');
 });

document.querySelector("#next").addEventListener("click", function () { 
  moveToSelected('next');
 });





}
</script>
</html>

com jquery funciona assim 

function moveToSelected(element) {

  if (element == "next") {
    var selected = $(".selected").next();
  } else if (element == "prev") {
    var selected = $(".selected").prev();
  } else {
    var selected = element;
  }
console.log(selected);
  

}

// Eventos teclado
$(document).keydown(function(e) {
    switch(e.which) {
        case 37: // left
        moveToSelected('prev');
        break;

        case 39: // right
        moveToSelected('next');
        break;

        default: return;
    }
    e.preventDefault();
});

$('#carousel div').click(function() {
  moveToSelected($(this));
});

$('#prev').click(function() {
  moveToSelected('prev');
});

$('#next').click(function() {
  moveToSelected('next');
});

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

gabrielms    0

gabrielms
Postado

@Marcos_imasters 

 

Cara, fiz algumas modificações no seu código de javascript puro, deixei ele um pouco mais legível.

 

Link do projeto:

https://codepen.io/morto/pen/agRLrB

 

Obs..: Seu código tem alguns erros, devido ao tipo de método seletor usado com o método removeAttribute.

 

Javascript: 

const slide = {
                main : null,
                elementImg : null,
                imgSelected : 0,
                nextSlide: function (){
                    if (this.imgSelected != null)
                    {
                        if (this.imgSelected < (this.elementImg.length - 1))
                        {
                            this.imgSelected++;
                            this.normalizeSlide();
                        }
                    }
                },
                prevSlide: function (){
                    if (this.imgSelected != null)
                    {
                        if (this.imgSelected > 0)
                        {
                            this.imgSelected--;
                            this.normalizeSlide();
                        }
                    }
                },
                normalizeSlide: function (){

                    for (num = 0; num < this.elementImg.length; num++)
                    {
                        this.elementImg[num].classList.remove("hideLeft","prevLeftSecond","prev","selected","next","nextRightSecond","hideRight");
                    }

                    this.elementImg[this.imgSelected].classList.add("selected");

                    if (this.imgSelected > 2)
                    {
                        this.elementImg[this.imgSelected-2].classList.add("hideLeft");
                        this.elementImg[this.imgSelected-2].classList.add("prevLeftSecond");
                        this.elementImg[this.imgSelected-1].classList.add("prev");
                    }
                    else if (this.imgSelected > 1)
                    {
                        this.elementImg[this.imgSelected-2].classList.add("prevLeftSecond");
                        this.elementImg[this.imgSelected-1].classList.add("prev");
                    }
                    else if (this.imgSelected > 0)
                    {
                        this.elementImg[this.imgSelected-1].classList.add("prev");
                    }

                    if ((this.imgSelected + 3) < this.elementImg.length)
                    {
                        this.elementImg[this.imgSelected+3].classList.add("hideRight");
                        this.elementImg[this.imgSelected+2].classList.add("nextRightSecond");
                        this.elementImg[this.imgSelected+1].classList.add("next");
                    }
                    else if ((this.imgSelected + 2) < this.elementImg.length)
                    {
                        this.elementImg[this.imgSelected+2].classList.add("nextRightSecond");
                        this.elementImg[this.imgSelected+1].classList.add("next");
                    }
                    else if((this.imgSelected + 1) < this.elementImg.length)
                    {
                        this.elementImg[this.imgSelected+1].classList.add("next");
                    }
                }
            }

            window.onload = () => {

                slide.main = document.getElementById("carousel");
                slide.elementImg = slide.main.getElementsByClassName("slideImg");

                for (num = 0; num < slide.elementImg.length; num++)
                {
                    slide.elementImg[num].setAttribute("img-number", num);
                    
                    slide.elementImg[num].addEventListener("click", (event) => {
                        slide.imgSelected = parseInt(event.target.parentElement.getAttribute("img-number"));
                        slide.normalizeSlide();
                    });

                    if (slide.elementImg[num].classList.contains("selected"))
                    {
                        slide.imgSelected = num;
                    }
                }

                document.getElementById("prev").addEventListener("click", () => {slide.prevSlide()});
                document.getElementById("next").addEventListener("click", () => {slide.nextSlide()});

            }

 

Para esse código funciona eu fiz algumas alterações no seu HTML e CSS.

 

HTML: 

<main>
                <div id="carousel">
                    <div class="slideImg hideLeft">
                        <img src="https://i1.sndcdn.com/artworks-000165384395-rhrjdn-t500x500.jpg">
                    </div>
                    <div class="slideImg prevLeftSecond">
                        <img src="https://i1.sndcdn.com/artworks-000185743981-tuesoj-t500x500.jpg">
                    </div>
                    <div class="slideImg prev">
                        <img src="https://i1.sndcdn.com/artworks-000158708482-k160g1-t500x500.jpg">
                    </div>
                    <div class="slideImg selected">
                        <img src="https://i1.sndcdn.com/artworks-000062423439-lf7ll2-t500x500.jpg">
                    </div>
                    <div class="slideImg next">
                        <img src="https://i1.sndcdn.com/artworks-000028787381-1vad7y-t500x500.jpg">
                    </div>
                    <div class="slideImg nextRightSecond">
                        <img src="https://i1.sndcdn.com/artworks-000108468163-dp0b6y-t500x500.jpg">
                    </div>
                    <div class="slideImg hideRight">
                        <img src="https://i1.sndcdn.com/artworks-000064920701-xrez5z-t500x500.jpg">
                    </div>
                </div>
                <div class="buttons">
                    <button id="prev">Prev</button>
                    <button id="next">Next</button>
                </div>
            </main>

CSS: 

            html, body, main {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #carousel {
                position: relative;
                height: 400px;
                top: 50%;
                transform: translateY(-50%);
                overflow: hidden;
            }

            #carousel div.slideImg {
                position: absolute;
                opacity: 0;
            }
            
            #carousel div img {
                width: 400px;
                transition: width 1s;
            }

            #carousel div.hideLeft {
                left: 0%;
                opacity: 0;
                transition: transform 1s, left 1s, opacity 1s;
                transform: translateY(50%) translateX(-50%);
            }

            #carousel div.hideLeft img {
                width: 200px;
            }

            #carousel div.hideRight {
                left: 100%;
                transition: transform 1s, left 1s, opacity 1s;
                opacity: 0;
                transform: translateY(50%) translateX(-50%);
            }

            #carousel div.hideRight img {
                width: 200px;
            }

            #carousel div.prev {
                z-index: 5;
                left: 30%;
                transform: translateY(50px) translateX(-50%);
                opacity: 1;
                transition: transform 1s, left 1s, opacity 1s;
            }

            #carousel div.prev img {
                width: 300px;
            }

            #carousel div.prevLeftSecond {
                z-index: 4;
                left: 15%;
                transform: translateY(50%) translateX(-50%);
                opacity: 0.7;
                transition: transform 1s, left 1s, opacity 1s;
            }

            #carousel div.prevLeftSecond img {
                width: 200px;
            }
            #carousel div.selected {
                z-index: 10;
                left: 50%;
                transition: transform 1s, left 1s, opacity 1s;
                opacity: 1;
                transform: translateY(0px) translateX(-50%);
            }

            #carousel div.next {
                z-index: 5;
                left: 70%;
                transition: transform 1s, left 1s, opacity 1s;
                opacity: 1;
                transform: translateY(50px) translateX(-50%);
            }

            #carousel div.next img {
                width: 300px;
            }

            #carousel div.nextRightSecond {
                z-index: 4;
                left: 85%;
                transition: transform 1s, left 1s, opacity 1s;
                transform: translateY(50%) translateX(-50%);
                opacity: 0.7;
            }

            #carousel div.nextRightSecond img {
                width: 200px;
            }


            .buttons {
                position: fixed;
                left: 50%;
                transform: translateX(-50%);
                bottom: 10px;
            }

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcos_imasters    288

Marcos_imasters
Postado

Obrigado vou da uma analisada e tenta refazer. obrigado tentei da reputação mais sistema parece está bugado.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • violin101
      Javascript - Calcular Valores Monetário em Tempo Real
      Por violin101
      Caros amigos, saudações.

      Estou com uma dúvida, referente cálculo de valores em tempo real.

      Tenho uma rotina, que faz o cálculo, o problema é mostrar o resultado.

      Quero mostrar o RESULTADO assim: 0,00  ou  0.00

      Abaixo posto o código.
      jQuery('input').on('keyup',function(){ //Remover ponto e trocar a virgula por ponto var m = document.getElementById("pgRest").value; while (m.indexOf(".") >= 0) { m = m.replace(".", ""); } m = m.replace(",","."); //Remover ponto e trocar a virgula por ponto var j = document.getElementById("pgDsct").value; while (j.indexOf(".") >= 0) { j = j.replace(".", ""); } j = j.replace(",","."); m = parseFloat(jQuery('#pgRest').val() != '' ? jQuery('#pgRest').val() : 0); j = parseFloat(jQuery('#pgDsct').val() != '' ? jQuery('#pgDsct').val() : 0); //Mostra o Resultado em Tempo Real jQuery('#pgTroco').val(m - j); <<=== aqui estou errando })  
       
      Grato,
       
      Cesar
       
       
    • violin101
      [Resolvido] JavaScript - Exibir logo dentro da Tabela html
      Por violin101
      Caro amigos, saudações.

      Tenho uma tabela escrita em JS que funciona corretamente.
       
      Minha dúvida:
      - como devo fazer para quando a Tabela HTML estiver vazia, exibir o LOGO da Empresa ?

      Abaixo posto o script:
      document.addEventListener( 'keydown', evt => { if (!evt.ctrlKey || evt.key !== 'i' ) return;// Não é Ctrl+A, portanto interrompemos o script evt.preventDefault(); //Chama a Função Calcular Qtde X Valor Venda calcvda(); var idProdutos = document.getElementById("idProdutos").value; var descricao = document.getElementById("descricao").value; var prd_unid = document.getElementById("prd_unid").value; var estoque_atual = document.getElementById("estoque_atual").value; var qtde = document.getElementById("qtde").value; var vlrunit = document.getElementById("vlrunit").value; var vlrtotals = document.getElementById("vlrtotal").value; var vlrtotal = vlrtotals.toLocaleString('pt-br', {minimumFractionDigits: 2}); if(validarConsumo(estoque_atual)){ //Chama a Modal com Alerta. $("#modal_qtdemaior").modal(); } else { if(qtde == "" || vlrunit == "" || vlrtotal == ""){ //Chama a Modal com Alerta. $("#modal_quantidade").modal(); } else { //Monta a Tabela com os Itens html = "<tr style='font-size:13px;'>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<input type='hidden' name='id_prds[]' value='"+idProdutos+"'>"+idProdutos+"</td>"; html += "<td width='47%' height='10'>"+ "<input type='hidden' name='descricao[]' value='"+descricao+"'>"+descricao+ "<input type='hidden' name='esp[]' value='"+prd_unid+"'> - ESP:"+prd_unid+ "<input type='hidden' name='estoq[]' value='"+estoque_atual+"'></td>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<input type='hidden' name='qtde[]' value='"+qtde+"'>"+qtde+"</td>"; html += "<td width='12%' height='10' style='text-align:right;'>"+ "<input type='hidden' name='vlrunit[]' value='"+vlrunit+"'>"+vlrunit+"</td>"; html += "<td width='14%' height='10' style='text-align:right;'>"+ "<input type='hidden' name='vlrtotal[]' value='"+vlrtotal+"'>"+vlrtotal+"</td>"; html += "<td width='12%' height='10' style='text-align:center;'>"+ "<button type='button' class='btn btn-uvas btn-remove-produto' style='margin-right:1%; padding:1px 3px; font-size:12px;' title='Remover Item da Lista'>"+ "<span class='fa fa-minus' style='font-size:12px;'></span></button></td>"; html += "</tr>"; $("#tbventas tbody").append(html); //Função para Somar os Itens do Lançamento somar(); $("#idProdutos").val(null); $("#descricao").val(null); $("#prd_unid").val(null); $("#qtde").val(null); $("#vlrunit").val(null); $("#vlrtotal").val(null); $("#idProdutos").focus(); //Se INCLUIR NOVO produto - Limpa a Forma de Pagamento $("#pgSoma").val(null); $("#pgRest").val(null); $("#pgDsct").val(null); $("#pgTroco").val(null); $("#tbpagar tbody").empty(); }//Fim do IF-qtde }//Fim do Validar Consumo });//Fim da Função btn-agregar  
      Grato,

      Cesar
       
    • violin101
      Javascript - Passar Parâmetros para uma Função.
      Por violin101
      Caros amigos, saudações.

      Estou com uma pequena dúvida se é possível ser realizado.

      Preciso passar 2 IDs para o Sistema executar a função, estou utilizando desta forma e gostaria de saber como faço via JS para passar os parâmetro que preciso.

      Observação:
      Dentro da TABELA utilizei 2 Forms, para passar os IDS que preciso, funcionou conforme código abaixo.
      <div class="card-body"> <table id="tab_clie" class="table table-bordered table-hover"> <thead> <tr> <th style="text-align:center; width:10%;">Pedido Nº</th> <th style="text-align:center; width:10%;">Data Pedido</th> <th style="text-align:center; width:32%;">Fornecedor</th> <th style="text-align:center; width:10%;">Status</th> <th style="text-align:center; width:5%;">Ação</th> </tr> </thead> <tbody> <?php foreach ($results as $r) { $dta_ped = date(('d/m/Y'), strtotime($r->dataPedido)); switch ($r->pd_status) { case '1': $status = '&nbsp;&nbsp;Aberto&nbsp;&nbsp;'; $txt = '#FFFFFF'; //Cor: Branco $cor = '#000000'; //Cor: Preta break; case '2': $status = 'Atendido Total'; $txt = '#FFFFFF'; //Cor: Branco $cor = '#086108'; //Cor: Verde break; case '3': $status = 'Atendido Parcial'; $txt = '#000000'; //Cor: Branco $cor = '#FEA118'; //Cor: Amarelo break; default: $status = 'Cancelado'; $txt = '#FFFFFF'; //Cor: Branco $cor = '#D20101'; //Cor: Vermelho break; } echo '<tr>'; echo '<td width="10%" height="10" style="text-align:center;">'.$r->pd_numero.'</td>'; echo '<td width="10%" height="10" style="text-align:center;">'.$dta_ped.'</td>'; echo '<td width="32%" height="10" style="text-align:left;">'.$r->nome.'</td>'; echo '<td width="10%" height="10" style="text-align:left;"><span class="badge" style="color:'.$txt.'; background-color:'.$cor.'; border-color:'.$cor.'">'.$status.'</span></td>'; echo '<td width="5%" style="text-align:center;">'; ?> <div class="row"> <?php if($this->permission->checkPermission($this->session->userdata('permissao'), 'vPedido')){ ?> <form action="<?= base_url() ?>compras/pedidos/visualizar" method="POST" > <input type="hidden" name="idPedido" value="<?php echo $r->idPedidos; ?>"> <input type="hidden" name="nrPedido" value="<?php echo $r->pd_numero; ?>"> <button class="btn btn-warning" title="Visualizar" style="margin-left:50%; padding: 1px 3px;"><i class="fa fa-search icon-white"></i></button> </form> <?php } if($this->permission->checkPermission($this->session->userdata('permissao'), 'ePedido')){ ?> <form action="<?= base_url() ?>compras/pedidos/editar" method="POST" > <input type="hidden" name="idPedido" value="<?php echo $r->idPedidos; ?>"> <input type="hidden" name="nrPedido" value="<?php echo $r->pd_numero; ?>"> <button class="btn btn-primary" title="Editar" style="margin-left:50%; padding: 1px 3px;"><i class="fa fa-edit icon-white"></i></button> </form> <?php } ?> </div> <?php echo '</td>'; echo '</tr>'; } ?> </tbody> </table> </div>
      Grato,

      Cesar.
    • belann
      editor quill configuração
      Por belann
      Olá!
       
      Estou usando o editor quill em uma página html, sem fazer a instalação com npm, mas usando as api´s via internet com http, no entanto não consigo fazer a tecla enter funcionar para mudança de linha, tentei essa configuração abaixo, mas não funcionou.
       
      modules: {       syntax: true,       toolbar: '#toolbar-container',       keyboard: {         bindings: {           enter: {             key: 13,             handler: function(range, context) {                       quill.formatLine(range.index, range.length, { 'align': '' });             }           }  
       
    • violin101
      JAVASCRIPT - Comparar Data Digitada com Data Atual
      Por violin101
      Caros amigos, saudações.
       
      Gostaria de poder tirar uma dúvida com os amigos.
       
      Como faço uma função para Comparar a Data Digitada pelo o Usuário com a Data Atual ?

      Data Digitada:  01/09/2024
       
      Exemplo:
      25/09/2024 é menor que DATA Atual  ====> mensagem: informe uma data válida.
      25/09/2024 é igual DATA Atual ===> o sistema libera os INPUT's.
       
      Como faço uma comparação com a Data Atual, para não Deixar Gravar Data retroativa a data Atual.
       
      Grato,
       
      Cesar
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito