【发布时间】：2018-05-21 14:01:16
【问题描述】：
所以我正在制作一个自定义 jquery 滑块，您可以在其中使用 next 和 prev 按钮（DOM 中的 next 和 prev 类）浏览内容滑块。出于某种原因，我得到的结果是非常随机的，只有在发送了 prev 按钮后才会从一张幻灯片切换到另一张幻灯片，我控制台记录了结果，以便您可以看到可见的索引。
这是我的代码：
$(document).ready(function(){
var sliders = $('.slider');
var show_index = 0;
$('.slider').eq(show_index).addClass('active_slider');
console.log(show_index);
console.log(sliders.length);
$('.prev').click(function(){
console.log('clicked prev');
if(show_index == 0){
$('.slider').eq(show_index).removeClass('active_slider');
$('.slider').eq(show_index-1).addClass('active_slider');
console.log(show_index);
}
else{
$('.slider').eq(show_index).removeClass('active_slider');
$('.slider').eq(show_index--).addClass('active_slider');
console.log(show_index);
}
});
$('.next').click(function(){
console.log('clicked next');
if(show_index == sliders.length){
$('.slider').eq(show_index).removeClass('active_slider');
$('.slider').eq(0).addClass('active_slider');
console.log(show_index);
}
else{
$('.slider').eq(show_index).removeClass('active_slider');
$('.slider').eq(show_index++).addClass('active_slider');
console.log(show_index);
}
});
});/*GRAN SLIDER START*/
.gran_slider_maincontainer{width:100%; height:100vh; display:flex; flex-direction:column; overflow:hidden;}
.gran_slider_big_container{width:100%; position:relative; height:90vh; overflow:hidden;}
.prev{cursor:pointer; position:absolute; left:20px; z-index:9999999999999999999999999999; top:50%; transform:translateY(-50%); font-size:20px; color:rgba(255,255,255,0.8);}
.next{cursor:pointer; position:absolute; right:20px; z-index:9999999999999999999999999999; top:50%; transform:translateY(-50%); font-size:20px; color:rgba(255,255,255,0.8);}
.gran_slider_big_navegation_container{width:auto; height:30px; display:flex; align-items:center; position:absolute; bottom:25px; right:50px; z-index:10000;}
.gran_slider_big_navegation_dot{width:15px; height:15px; background-color:rgba(255,255,255,0.4); margin:0px 3px; border-radius:50%;}
.gran_slider_big_item_container{display:none; width:100%; height:100%; position:relative; overflow:hidden;}
.gran_slider_big_item_gradient_overlay{width:100%; height:100%; z-index:3; background-color:rgba(0,0,0,0.3); position:absolute; top:0px; left:0px;}
.gran_slider_big_item_image{width:100%; height:100%; z-index:2; background-position:center; background-size:cover;}
.gran_slider_big_item_texts_container{width:55%; height:auto; display:flex; flex-direction:column; padding:10px;}
.gran_slider_big_item_texts_title{font-size:45px; color:white; font-weight:600; margin-bottom:30px; text-shadow:5px 5px 10px rgba(0,0,0,1.0);}
.gran_slider_big_item_texts_description{font-size:30px; color:white; font-weight:600 margin-bottom:30px; text-shadow:5px 5px 10px rgba(0,0,0,1.0);}
.gran_slider_small_container{width:100%; height:10vh; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));}
.active_slider{display:flex;}
/*GRAN SLIDER END*/
.from_right_to_bottom {
position: absolute;
right: 120px;
opacity: 0;
animation-name: from_right_to_bottom;
animation-delay: 1500ms;
animation-duration: 6s;
animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-iteration-count: 1;
z-index:9999;
text-align:right;
}
@keyframes from_right_to_bottom {
0% {top: -200px; opacity: 0;}
100% {top: 250px; opacity: 1;}
}<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="gran_slider_maincontainer" style="">
<div class="gran_slider_big_container" style=" ">
<i class="prev fa fa-chevron-left" style=""></i>
<i class="next fa fa-chevron-right" style=""></i>
<!--
<div class="gran_slider_big_navegation_container" style=" ">
<a class="gran_slider_big_navegation_dot" href="" style=""></a>
<a class="gran_slider_big_navegation_dot" href="" style=""></a>
<a class="gran_slider_big_navegation_dot" href="" style=""></a>
</div>
-->
<div class="gran_slider_big_item_container slider" style="">
<div class="gran_slider_big_item_gradient_overlay" style=""></div>
<div class="gran_slider_big_item_image move" style="background-color:blue;"></div>
<div class="gran_slider_big_item_texts_container from_right_to_bottom" style=" ">
<span class="gran_slider_big_item_texts_title" style="">Titulo</span>
<span class="gran_slider_big_item_texts_description" style="">Esta es una descripción que se mueve hacia la derecha, empezando por fuera de la derecha.</span>
</div>
</div>
<div class="gran_slider_big_item_container slider" style="">
<div class="gran_slider_big_item_gradient_overlay" style=""></div>
<div class="gran_slider_big_item_image move" style="background-color:red;"></div>
<div class="gran_slider_big_item_texts_container from_right_to_bottom" style=" ">
<span class="gran_slider_big_item_texts_title" style="">Titulo</span>
<span class="gran_slider_big_item_texts_description" style="">Esta es una descripción que se mueve hacia la derecha, empezando por fuera de la derecha.</span>
</div>
</div>
<div class="gran_slider_big_item_container slider" style="">
<div class="gran_slider_big_item_gradient_overlay" style=""></div>
<div class="gran_slider_big_item_image move" style="background-color:green;"></div>
<div class="gran_slider_big_item_texts_container from_right_to_bottom" style=" ">
<span class="gran_slider_big_item_texts_title" style="">Titulo</span>
<span class="gran_slider_big_item_texts_description" style="">Esta es una descripción que se mueve hacia la derecha, empezando por fuera de la derecha.</span>
</div>
</div>
</div>
<div class="gran_slider_small_container" style=""></div>
</div>【问题讨论】：
-
你在哪里增加你的全局变量
show_index？在prev和next单击事件上，您会发现带有减号或加号show_index的幻灯片，但您永远不会执行类似show_index = show_index - 1;的操作。它可能永远是 0 -
我添加了很棒的字体链接，所以每个人都可以看到上一个和下一个按钮
-
@zgood 我做 $('.slider').eq(show_index++).addClass('active_slider');或 $('.slider').eq(show_index--).addClass('active_slider');在 next 和 prev 函数的 te else 语句中
-
那没有设置全局变量...
标签： javascript jquery html css