jquery 带点的图库轮播

Question

我正在完成画廊轮播的工作，但我只停留在 jquery 功能上。

图库每 2.5 秒淡出一次，但是当我单击一个点时，我可以从最后一个点中删除 class 活动。

有人可以帮忙吗？

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

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

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

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

});

.galeria {

    /*width: 100%;*/
        }
   
.galeria img{
    text-align:center;
    width:100%;
        }
   
.ponto {
    height: 13px;
    width: 13px;
    margin: 0 2px;
    background-color: #b30039;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    
        }
.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;
 z-index: 1;
 margin-top: -30px;
 margin-left: auto;
 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">

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

Answer 1

你需要改变

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

到

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

以上将从当前元素的任何兄弟元素中删除 activep，然后将 class 添加到它。如果您使用我的建议，您可以删除 $("#"+remactive).removeClass('activep'); 部分。

jquery 带点的图库轮播

jquery gallery carrousel with dot

css

jquery

image-gallery

carousel