jquery gallery carrousel with dot

Question

私はギャラリーカルーセルのための作業を終了しています。私はjquery関数のみに取り組んでいます。

ギャラリーは2.5秒ごとに消えますが、ドットをクリックすると、最後のものからアクティブなクラスを削除できます。

誰でも手伝ってもらえますか？

$(document).ready(function(){ \t 
 
var contar = 2; 
 
var remactive = 1; 
 
var max_img =6; \t 
 

 
for(var i = 0; i < max_img; i++) { 
 
    $('#' + i).click(pontos(i)); 
 
    } 
 

 
setInterval(function(){ 
 
\t passar (contar); 
 
\t contar++; 
 
\t remactive=contar-1; 
 
\t if(contar == max_img){ 
 
\t \t contar=1; 
 
\t \t remactive=5; 
 
\t \t } 
 
}, 2500); 
 

 
function passar(){ 
 
\t $(".img").attr('src', 'imagens/'+contar+'.jpg'); 
 
\t $("#"+contar).addClass('activep'); \t $("#"+remactive).removeClass('activep'); 
 
\t \t \t \t } 
 
\t 
 
function pontos(i){ 
 
    return function(){ 
 
\t $(".img").attr('src', 'imagens/'+i+'.jpg'); 
 
\t $("#"+i).addClass('activep'); 
 
\t //inicia a contagem a partir do click 
 
\t contar=i; 
 
\t remactive=i-1; // 
 
    } 
 
    } 
 

 
});

.galeria { 
 

 
    /*width: 100%;*/ 
 
     } 
 
\t \t \t 
 
.galeria img{ 
 
    text-align:center; 
 
    width:100%; 
 
     } 
 
\t \t \t 
 
.ponto { 
 
    height: 13px; 
 
    width: 13px; 
 
    margin: 0 2px; 
 
    background-color: #b30039; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    transition: background-color 0.6s ease; 
 
\t \t \t \t 
 
     } 
 
.activep { 
 
    background-color: #4d0018; 
 
     } 
 

 
    /* Animação de fade */ 
 
.fade { 
 
    -webkit-animation-name: fade; 
 
    -webkit-animation-duration: 1.5s; 
 
    animation-name: fade; 
 
    animation-duration: 1.5s; 
 
     } 
 

 
@-webkit-keyframes fade { 
 
    from {opacity: .4} 
 
    to {opacity: 1} 
 
     } 
 

 
@keyframes fade { 
 
    from {opacity: .4} 
 
    to {opacity: 1} 
 
     } 
 
.rodape { 
 
    position: relative; 
 
\t z-index: 1; 
 
\t margin-top: -30px; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="galeria fade col-lg-4 col-md-8 col-sm-12"> 
 

 
\t \t <img class="img" id="slideshow" src="imagens/1.jpg" /> 
 
\t \t \t 
 
\t \t <div class="rodape" style="text-align:center" > 
 
\t \t \t \t <span id="1" class="ponto activep"></span> 
 
    \t \t \t \t <span id="2" class="ponto"></span> 
 
    \t \t \t \t <span id="3" class="ponto"></span> 
 
\t \t \t \t <span id="4" class="ponto"></span> 
 
\t \t \t \t <span id="5" class="ponto"></span> 
 
\t \t </div> 
 
</div>

Answer 1

あなたは

$("#"+i).siblings('.activep').removeClass('activep').end().addClass('activep'); 

に

$("#"+i).addClass('activep'); 

を変更する必要が上記の現在の要素のいずれかの兄弟からactivepを削除し、追加しますそれにクラス。あなたが私の提案を使用する場合は$("#"+remactive).removeClass('activep');部分を削除することができます。