javascript - JQuery slider next 和 prev 按钮仅在单击垃圾邮件时才有效

标签 javascript jquery html css

所以我制作了一个自定义 jquery slider ，您可以在其中使用 next 和 prev 按钮(DOM 中的 next 和 prev 类)浏览内容 slider 。出于某种原因，我得到的结果非常随机，只有在按下 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)。仅执行 show_index++ 不会设置值...您需要使用等号 (=) 设置值，例如 show_index = {some value };

您的 prev 点击事件应该看起来更像这样:

$('.prev').click(function() {
        console.log('clicked prev');
        if (show_index == 0) {
            $('.slider').eq(show_index).removeClass('active_slider');
            show_index = (sliders.length - 1); // set your global variable
            $('.slider').eq(show_index).addClass('active_slider');
            console.log(show_index);
        } else {   
            $('.slider').eq(show_index).removeClass('active_slider');
            show_index = show_index - 1;  // set your global variable
            $('.slider').eq(show_index).addClass('active_slider');
            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 global variable
            $('.slider').eq(show_index).addClass('active_slider');
            console.log(show_index);
        } else {       
            $('.slider').eq(show_index).removeClass('active_slider');
            show_index = show_index + 1; //set global variable
            $('.slider').eq(show_index).addClass('active_slider');
            console.log(show_index);
        }
    });


var show_index = 0;
$(document).ready(function(){
	
	var sliders = $('.slider');
	  	    	
	$('.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');
show_index = (sliders.length - 1);// set it here
		    $('.slider').eq(show_index).addClass('active_slider');	
			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');
            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');	
			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');
            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;}
  
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></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=" ">
	        <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>

关于javascript - JQuery slider next 和 prev 按钮仅在单击垃圾邮件时才有效，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50450583/

上一篇：html - Materialise <div 类 ="col s12 m6 l3"> 不工作

下一篇：html - 除了标签之外，如何使网格居中？

相关文章：

javascript - 如何在 JavaScript 中访问另一个文件中的对象和类

javascript - 尝试增加 javascript 中的内置类型时出错

jquery - 与 jQuery 验证绑定(bind)的单选选项不起作用

html - 为 CSS3 动画传入变量

javascript - JavaScript 中的 UNRAR

javascript - 使用 Yup 验证电话号码？

javascript - JQuery 只获取元素的文本而不是子元素的文本

javascript - 如何将html div复制到另一个div而不显示none div

html - 我可以在 HTML 按钮上写公式吗？

javascript - 我如何包含所有 js 文件，就像我们在一个 main.css 中添加所有 css 文件一样

©2024 IT工具网  联系我们