我的自定义 jquery 滑块问题

用户8749260

我正在尝试为我的个人页面设计一个 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>

塔普拉

$(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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

自定义JQuery CSS背景滑块导航问题

来自分类Dev

自定义滑块问题

来自分类Dev

带有自动滑动和按钮的自定义 jquery 图像滑块中的 setInterval 问题

来自分类Dev

自定义jquery / js滑块动画

来自分类Dev

集成自定义 jQuery 滑块

来自分类Dev

jQuery自定义排序问题

来自分类Dev

jQuery滑块UI问题

来自分类Dev

jQuery图像滑块问题

来自分类Dev

jQuery图像滑块问题

来自分类Dev

jQuery滑块UI问题

来自分类Dev

如何使用jQuery自定义<ul>旋转木马滑块?

来自分类Dev

如何为自定义垂直滑块Jquery设置动画

来自分类Dev

使用jQuery创建自定义范围滑块

来自分类Dev

如何为自定义垂直滑块Jquery设置动画

来自分类Dev

响应问题jQuery单击滑块

来自分类Dev

用jQuery创建滑块的问题

来自分类Dev

jQuery UI 滑块步骤问题

来自分类Dev

使用jQuery UI ThemeRoller自定义主题实现问题

来自分类Dev

jQuery文件上传自定义路径问题

来自分类Dev

使用jQuery UI ThemeRoller自定义主题实现问题

来自分类Dev

使用幻灯片功能中的jQuery ui参数的jQuery自定义滑块(?)

来自分类Dev

使用幻灯片功能中的jQuery ui参数的jQuery自定义滑块(?)

来自分类Dev

从滑块jquery ui中的元素数据属性设置自定义值

来自分类Dev

使用自定义jQuery滑块和键盘键检测事件

来自分类Dev

如何使用jQuery自定义<ul>旋转木马滑块动画?

来自分类Dev

自定义jQuery滑块重复相同的图像-不通过“ i”递增

来自分类Dev

从滑块jquery ui中的元素数据属性设置自定义值

来自分类Dev

Jquery 自定义图像滑块只能工作一次或第三次

来自分类Dev

自定义Vaadin滑块