我正在尝试为我的个人页面提供一个jquery滑块，但我不知道如何正确地使其工作，应该每2秒进行一次转换但没有任何反应！
我也试图这样做，以便当我点击下一个和上一个按钮时，它可以让我自己浏览幻灯片。
我的自定义jquery滑块的容器元素是index_hub_slider_container
到目前为止，这是我的代码：
$(document).ready(function(){
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = $('.index_hub_slider_item');
for (i = 0; i < slides.length; i++) {
slides[i].css("display", "none");
}
slideIndex++;
if(slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].css("display", "block");
setTimeout(showSlides,2000);
}
});.index_hub_maincontainer{margin:0px 0px; width:100%; height:auto; align-items:center; background-color:#EEEEEE; display:flex; flex-direction:column; padding:50px 100px 25px 100px; font-family:Open Sans;}
.index_hub_tittle{width:100%; height:50px; display:flex; justify-content:center; align-items:center; color:#454545; font-family:Archivo Black; font-size:35px; font-weight:900;}
.index_hub_description{width:100%; height:50px;display:flex; justify-content:center; align-items:center; color:rgba(0,0,0,0.7); font-size:16px; margin-bottom:40px; font-weight:200;}
.index_hub_contents_container{width:100%; height:650px; display:flex; flex-wrap:wrap; justify-content:space-between; position:relative;}
.index_hub_content1{margin-top:auto; position:relative; box-shadow:3px 3px 3px rgba(0,0,0,0.2); width:32%; height:40%; display:flex; background-size:cover; background-image:url('images/doggy4.jpg');}
.index_hub_content1_title{font-size:20px; font-weight:500; text-align:center; position:absolute; bottom:10px; left:0px; z-index:99999999; color:white; text-transform:uppercase; width:100%; background-color:rgba(0,0,0,0.7); padding:8px 15px;}
.black_overlay{position:absolute; transition:all 800ms ease; top:0px; left:0px; width:100%; height:100%; background-color:black; opacity:0}
.black_overlay:hover{opacity:0.3;}
.black_gradient{position:absolute; transition:all 800ms ease; top:0px; left:0px; width:100%; height:100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0)); opacity:0}
.black_gradient:hover{opacity:0.5;}
.index_hub_content2{margin-top:auto; position:relative; box-shadow:3px 3px 3px rgba(0,0,0,0.2); width:32%; height:40%; display:flex; flex-flow:column-reverse; align-items:center; background-size:cover; background-image:url('images/doggy5.jpg');}
.index_hub_content2_title{font-size:20px; font-weight:500; color:white; text-align:center; text-transform:uppercase; padding:8px 15px; width:100%; background-color:rgba(0,0,0,0.7); position:absolute; left:0px; bottom:10px;}
.index_hub_content3{position:relative; box-shadow:3px 3px 3px rgba(0,0,0,0.2); width:32%; height:100%; display:flex; justify-content:center; align-items:center; box-shadow:3px 3px 3px rgba(0,0,0,0.2); background-position:center; background-size:cover; background-repeat:no-repeat;}
.index_hub_content3_title{width:100%; font-size:20px; z-index:99999; text-align:center; font-weight:500; color:white; text-transform:uppercase; position:absolute; left:0px; bottom:10px; padding:8px 15px; background-color:rgba(0,0,0,0.7);}
.index_hub_slider_container{width:66%; box-shadow:3px 3px 3px rgba(0,0,0,0.2); height:56%; position:absolute; top:0px; left:0px; overflow:hidden;}
.index_hub_slider_item{width:100%; height:100%; position:absolute; left:0px; bottom:0px; background-position:center; background-size:cover; /*display:none;*/}
.index_hub_slider_item_image{width:100%; height:100%; background-position:center; background-size:cover; position:absolute; top:0px; left:0px;}
.index_hub_slider_item_texts_container{width:100%; height:20%; position:absolute; bottom:0px; left:0px; background: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7)); padding:5px 150px 5px 10px;}
.index_hub_slider_item_texts_text{font-size:13px; color:rgba(255,255,255,0.9);}
.index_hub_slider_item_texts_link{width:auto; padding:5px 10px; background-color:var(--main_color); color:white; font-weight:500; font-size:15px; border-radius:3px; position:absolute; top:50%; transform:translateY(-50%); right:25px;}
.index_hub_slider_prev{position:absolute; top:50%; transform:translateY(-50%); left:0px; transition:all 900ms ease; opacity:0; font-size:25px; padding:8px 15px; background-color:rgba(0,0,0,0.7); color:rgba(255,255,255,1.0); z-index:999999999999;}
.index_hub_slider_next{position:absolute; top:50%; transform:translateY(-50%); right:0px;transition:all 900ms ease; opacity:0; font-size:25px; padding:8px 15px; background-color:rgba(0,0,0,0.7); color:rgba(255,255,255,1.0); z-index:99999999999;}
.index_hub_slider_container:hover .index_hub_slider_prev{opacity:1;}
.index_hub_slider_container:hover .index_hub_slider_next{opacity:1;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="index_hub_maincontainer" style=" ">
<!--<span class="index_hub_tittle" style=" ">TUS ESPECIALISTAS EN ENTRENAMIENTO CANINO</span>
<span class="index_hub_description" style="">Disponemos de muchos planes personalizados de adiestramiento, pregúntanos que podemos hacer por ti y tu mascota</span>-->
<div class="index_hub_contents_container" style="">
<a class="index_hub_content1" href="/clases/domicilio" style="background-image:url('/img/dogs19.jpg');" title="Clases a domicilio" >
<span class="index_hub_content1_title" style="" >Clases a domicilio</span>
<div class="black_overlay" style=""></div>
</a>
<a class="index_hub_content2" href="/clases/grupo" style="background-image:url('/img/dogs20.jpg');" title="Clases en grupo">
<span class="index_hub_content2_title" style="">Clases en grupo</span>
<div class="black_overlay" style=""></div>
</a>
<a class="index_hub_content3" href="/formate-con-nosotros" style="background-image:url('img/dogs14.jpg'); background-position-x:55%;" title="Conviertete en adiestrador canino profesional">
<span class="index_hub_content3_title" style="">Formate con nosotros</span>
<div class="black_overlay" style=""></div>
</a>
<div class="index_hub_slider_container" href="" style="">
<i class="index_hub_slider_prev fa fa-chevron-left pointer"></i>
<i class="index_hub_slider_next fa fa-chevron-right pointer"></i>
<div class="index_hub_slider_item" style="">
<div class="index_hub_slider_item_image" style="background-image:url('/img/dogs18.jpg');"></div>
<div class="index_hub_slider_item_texts_container" style="">
<span class="index_hub_slider_item_texts_text" >Este es un texto descriptivo del slider que se mueve solito, o al menos espero quelo haga.</span>
<a class="index_hub_slider_item_texts_link" href="" style="">Leer más</a>
</div>
</div>
<div class="index_hub_slider_item" style="">
<div class="index_hub_slider_item_image" style="background-image:url('/img/dogs15.jpg');"></div>
<div class="index_hub_slider_item_texts_container" style="">
<span class="index_hub_slider_item_texts_text" >Este es un texto descriptivo del slider que se mueve solito, o al menos espero quelo haga.</span>
<a class="index_hub_slider_item_texts_link" href="" style="">Leer más</a>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
$(document).ready(function(){
var slideIndex = 0;
showSlides();
function showSlides() {
//get the slides, and hide all of them
//jQuery will iterate over all of the elements
//in the result stack
var slides = $('.index_hub_slider_item').hide();
//show the current slide
//++ after the variable will increment it after
//it is used
slides.eq(slideIndex++).css("display", "block");
//if the slide index is equal to or greater than
//the array length (size of n = indexes of 0-(n-1))
//set it back to 0
if (slideIndex >= slides.length) {
slideIndex = 0
}
//start the next iteration
setTimeout(showSlides,2000);
}
});.index_hub_maincontainer{margin:0px 0px; width:100%; height:auto; align-items:center; background-color:#EEEEEE; display:flex; flex-direction:column; padding:50px 100px 25px 100px; font-family:Open Sans;}
.index_hub_tittle{width:100%; height:50px; display:flex; justify-content:center; align-items:center; color:#454545; font-family:Archivo Black; font-size:35px; font-weight:900;}
.index_hub_description{width:100%; height:50px;display:flex; justify-content:center; align-items:center; color:rgba(0,0,0,0.7); font-size:16px; margin-bottom:40px; font-weight:200;}
.index_hub_contents_container{width:100%; height:650px; display:flex; flex-wrap:wrap; justify-content:space-between; position:relative;}
.index_hub_content1{margin-top:auto; position:relative; box-shadow:3px 3px 3px rgba(0,0,0,0.2); width:32%; height:40%; display:flex; background-size:cover; background-image:url('images/doggy4.jpg');}
.index_hub_content1_title{font-size:20px; font-weight:500; text-align:center; position:absolute; bottom:10px; left:0px; z-index:99999999; color:white; text-transform:uppercase; width:100%; background-color:rgba(0,0,0,0.7); padding:8px 15px;}
.black_overlay{position:absolute; transition:all 800ms ease; top:0px; left:0px; width:100%; height:100%; background-color:black; opacity:0}
.black_overlay:hover{opacity:0.3;}
.black_gradient{position:absolute; transition:all 800ms ease; top:0px; left:0px; width:100%; height:100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0)); opacity:0}
.black_gradient:hover{opacity:0.5;}
.index_hub_content2{margin-top:auto; position:relative; box-shadow:3px 3px 3px rgba(0,0,0,0.2); width:32%; height:40%; display:flex; flex-flow:column-reverse; align-items:center; background-size:cover; background-image:url('images/doggy5.jpg');}
.index_hub_content2_title{font-size:20px; font-weight:500; color:white; text-align:center; text-transform:uppercase; padding:8px 15px; width:100%; background-color:rgba(0,0,0,0.7); position:absolute; left:0px; bottom:10px;}
.index_hub_content3{position:relative; box-shadow:3px 3px 3px rgba(0,0,0,0.2); width:32%; height:100%; display:flex; justify-content:center; align-items:center; box-shadow:3px 3px 3px rgba(0,0,0,0.2); background-position:center; background-size:cover; background-repeat:no-repeat;}
.index_hub_content3_title{width:100%; font-size:20px; z-index:99999; text-align:center; font-weight:500; color:white; text-transform:uppercase; position:absolute; left:0px; bottom:10px; padding:8px 15px; background-color:rgba(0,0,0,0.7);}
.index_hub_slider_container{width:66%; box-shadow:3px 3px 3px rgba(0,0,0,0.2); height:56%; position:absolute; top:0px; left:0px; overflow:hidden;}
.index_hub_slider_item{width:100%; height:100%; position:absolute; left:0px; bottom:0px; background-position:center; background-size:cover; /*display:none;*/}
.index_hub_slider_item_image{width:100%; height:100%; background-position:center; background-size:cover; position:absolute; top:0px; left:0px;}
.index_hub_slider_item_texts_container{width:100%; height:20%; position:absolute; bottom:0px; left:0px; background: linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7)); padding:5px 150px 5px 10px;}
.index_hub_slider_item_texts_text{font-size:13px; color:rgba(255,255,255,0.9);}
.index_hub_slider_item_texts_link{width:auto; padding:5px 10px; background-color:var(--main_color); color:white; font-weight:500; font-size:15px; border-radius:3px; position:absolute; top:50%; transform:translateY(-50%); right:25px;}
.index_hub_slider_prev{position:absolute; top:50%; transform:translateY(-50%); left:0px; transition:all 900ms ease; opacity:0; font-size:25px; padding:8px 15px; background-color:rgba(0,0,0,0.7); color:rgba(255,255,255,1.0); z-index:999999999999;}
.index_hub_slider_next{position:absolute; top:50%; transform:translateY(-50%); right:0px;transition:all 900ms ease; opacity:0; font-size:25px; padding:8px 15px; background-color:rgba(0,0,0,0.7); color:rgba(255,255,255,1.0); z-index:99999999999;}
.index_hub_slider_container:hover .index_hub_slider_prev{opacity:1;}
.index_hub_slider_container:hover .index_hub_slider_next{opacity:1;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="index_hub_maincontainer" style=" ">
<!--<span class="index_hub_tittle" style=" ">TUS ESPECIALISTAS EN ENTRENAMIENTO CANINO</span>
<span class="index_hub_description" style="">Disponemos de muchos planes personalizados de adiestramiento, pregúntanos que podemos hacer por ti y tu mascota</span>-->
<div class="index_hub_contents_container" style="">
<a class="index_hub_content1" href="/clases/domicilio" style="background-image:url('/img/dogs19.jpg');" title="Clases a domicilio" >
<span class="index_hub_content1_title" style="" >Clases a domicilio</span>
<div class="black_overlay" style=""></div>
</a>
<a class="index_hub_content2" href="/clases/grupo" style="background-image:url('/img/dogs20.jpg');" title="Clases en grupo">
<span class="index_hub_content2_title" style="">Clases en grupo</span>
<div class="black_overlay" style=""></div>
</a>
<a class="index_hub_content3" href="/formate-con-nosotros" style="background-image:url('img/dogs14.jpg'); background-position-x:55%;" title="Conviertete en adiestrador canino profesional">
<span class="index_hub_content3_title" style="">Formate con nosotros</span>
<div class="black_overlay" style=""></div>
</a>
<div class="index_hub_slider_container" href="" style="">
<i class="index_hub_slider_prev fa fa-chevron-left pointer"></i>
<i class="index_hub_slider_next fa fa-chevron-right pointer"></i>
<div class="index_hub_slider_item" style="">
<div class="index_hub_slider_item_image" style="background-image:url('/img/dogs18.jpg');"></div>
<div class="index_hub_slider_item_texts_container" style="">
<span class="index_hub_slider_item_texts_text" >1Este es un texto descriptivo del slider que se mueve solito, o al menos espero quelo haga.</span>
<a class="index_hub_slider_item_texts_link" href="" style="">Leer más</a>
</div>
</div>
<div class="index_hub_slider_item" style="">
<div class="index_hub_slider_item_image" style="background-image:url('/img/dogs15.jpg');"></div>
<div class="index_hub_slider_item_texts_container" style="">
<span class="index_hub_slider_item_texts_text" >2Este es un texto descriptivo del slider que se mueve solito, o al menos espero quelo haga.</span>
<a class="index_hub_slider_item_texts_link" href="" style="">Leer más</a>
</div>
</div>
</div>
</div>
</div>