我正在完成 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>
最佳答案
你需要改变
$("#"+i).addClass('activep');
到
$("#"+i).siblings('.activep').removeClass('activep').end().addClass('activep');
以上将从当前元素的任何兄弟元素中删除 activep
,然后将类添加到它。如果您使用我的建议,您可以删除 $("#"+remactive).removeClass('activep');
部分。
关于带点的 jquery 画廊轮播,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41782846/