时间戳

首页 > 解决方案 > JQuery滑块导航点不起作用

javascript - JQuery滑块导航点不起作用

问题描述

所以我正在制作一个自定义 jquery 滑块，滑块工作得很好，但导航点由于某种原因不起作用，如果我单击导航点，则相应的滑块应该可见，但它只是显示为空白。

这是代码的重要部分，我根据滑块的数量附加点以及在点上注册点击事件的位置：

$('.slider').each(function(){
        $('.gran_slider_big_navegation_container').append('<span class="dot"></span>');
    });
	
	
	$('.dot').click(function(){
        index = $(this).eq();
		console.log(index);
        $('.slider').removeClass('active_slider');	
	    $('.slider').eq(index).addClass('active_slider');
		show_index = index;
		
    });

这是滑块的完整代码，就像现在一样：

$(document).ready(function(){
	
	
	var interval = 12000;
	var sliders = $('.slider');
	var dots = $('.dot');
	var index = 0;
	var show_index = 0;
	
	
	$('.slider').eq(show_index).addClass('active_slider');
	$('.dot').eq(show_index).addClass('active_dot');
	console.log(show_index);
	console.log(sliders.length);
	
	
	
	
	setInterval(function() {
        
		if(show_index == (sliders.length- 1)){
			
			
			$('.slider').eq(show_index).removeClass('active_slider');
            show_index = 0;	// set it here
		    $('.slider').eq(show_index).addClass('active_slider');
            $('.dot').removeClass('active_dot');			
			$('.dot').eq(show_index).addClass('active_dot');			
			console.log(show_index);
		}
		
		else{
			
			
			$('.slider').eq(show_index).removeClass('active_slider');
            show_index = show_index + 1; // set it here	
		    $('.slider').eq(show_index).addClass('active_slider');
			$('.dot').removeClass('active_dot');			
			$('.dot').eq(show_index).addClass('active_dot');
            console.log(show_index);			
		}
		
    }, interval);
	
	
	
	
	$('.prev').click(function(){
		
		console.log('clicked prev');
		
		if(show_index == 0){
			
			
			$('.slider').eq(show_index).removeClass('active_slider');
            show_index = (sliders.length - 1);// set it here
		    $('.slider').eq(show_index).addClass('active_slider');
            $('.dot').removeClass('active_dot');			
			$('.dot').eq(show_index).addClass('active_dot');			
			console.log(show_index);
		}
		
		else{
			
			$('.slider').eq(show_index).removeClass('active_slider');
            show_index = show_index - 1; // set it here	
		    $('.slider').eq(show_index).addClass('active_slider');
			$('.dot').removeClass('active_dot');			
			$('.dot').eq(show_index).addClass('active_dot');
            console.log(show_index);			
		}
    });
	
	
	
	$('.next').click(function(){
		
		console.log('clicked next');
		
		if(show_index == (sliders.length- 1)){
			
			
			$('.slider').eq(show_index).removeClass('active_slider');
            show_index = 0;	// set it here
		    $('.slider').eq(show_index).addClass('active_slider');
            $('.dot').removeClass('active_dot');			
			$('.dot').eq(show_index).addClass('active_dot');
			console.log(show_index);
		}
		
		else{
			
			
			$('.slider').eq(show_index).removeClass('active_slider');
            show_index = show_index + 1; // set it here	
		    $('.slider').eq(show_index).addClass('active_slider');
			$('.dot').removeClass('active_dot');			
			$('.dot').eq(show_index).addClass('active_dot');
            console.log(show_index);			
		}
    });
	
	
	
	
	$('.slider').each(function(){
        $('.gran_slider_big_navegation_container').append('<span class="dot"></span>');
    });
	
	
	$('.dot').click(function(){
        index = $(this).eq();
		console.log(index);
        $('.slider').removeClass('active_slider');	
	    $('.slider').eq(index).addClass('active_slider');
		show_index = 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; transition:all 1000ms ease; opacity:0; 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; transition:all 1000ms ease; opacity:0; 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:9999999999999999999999999999;}
.dot{width:15px; height:15px;  background-color:rgba(0,0,0,0.7); transition: all 2000ms ease; margin:0px 6px; border-radius:50%; cursor:pointer;}
.gran_slider_big_container:hover .prev{opacity:1;}
.gran_slider_big_container:hover .next{opacity:1;}
.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.4); position:absolute; top:0px; left:0px;}
.gran_slider_big_item_image{width:100%; height:100%; z-index:2; 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; opacity:1;}
.active_dot{background-color:rgba(255,255,255,0.9);}
/*GRAN SLIDER END*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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=" "></div>
	    <div class="gran_slider_big_item_container slider fade" 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 fade" style="">
	        <div class="gran_slider_big_item_gradient_overlay" style=""></div>
	        <div class="gran_slider_big_item_image move" style="background-color:yellow;"></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 fade" 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>
    <div class="gran_slider_small_container" style=""></div>
</div>

标签： javascriptjqueryhtmlcss

解决方案

在dot单击时调用的函数中，您将索引变量设置.eq()为该点的变量。您还将它打印到控制台，它打印一个对象而不是索引（我假设这是您希望从这个函数中得到的）。因为您无法从整个对象中准确获取索引，所以您的滑块代码会运行，但找不到与索引与对象匹配的任何滑块（因为不会有任何滑块）。

因此，与其说

index = $(this).eq();

你可能想说这个：

index = $(this).index();

这会将索引变量设置为单击的点的变量，然后将滑块更新为该点。我知道这并不能修复按钮（即使单击其他按钮，活动按钮也会保持显示），但我不确定这是否在您的问题范围内。

推荐阅读