Question

我正在完成Gallery Carousel的工作，而且我只是坚持使用jquery功能。

画廊每2.5秒消失一次，但是当我点击一个点时，我可以删除上一个活动的类。

任何人都可以提供帮助吗？

$(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，然后将类添加到其中。如果您使用我的建议，可以删除$("#"+remactive).removeClass('activep');部分。

jquery画廊卡鲁塞尔与点

1 个答案: