jQuery prev / next滑块如何在第一张/最后一张幻灯片上禁用prev / next?

时间:2019-09-22 08:06:10

标签: javascript jquery html css

在以下情况下,我想禁用下一个/上一个按钮:

当第一张幻灯片出现在边框内时,禁用上一个按钮;

在动画到达最后一张幻灯片时禁用下一个按钮;

换句话说:

在内部的第一张幻灯片预设中,我要防止滑块向右移动,然后...

在本节中出现的最后一张幻灯片上,我要防止滑块向左移动

<pre>
   <code>
<div class="AMcarousel" id="carousel-container">                                                                                     
 <div class="left-container prev ">                                                                                      
  <div class="left-btn">                                                                                                 
   <i class="fas  custom-chev fa-chevron-left"></i>                                                                                      
  </div>                                                                                 
 </div>

  <div class="right-container prev ">                                                                                        
   <div class="right-btn">                                                                                               
    <i class="fas  custom-chev fa-chevron-right"></i>                                                                                        
   </div>                                                                                
  </div>


  <div id="slide2" class="slide">                                                                                    
   <div class="hour-table">                                                                                              
    <ul class="hour-list" >                                                                                                  
     <li><a href="#" class="active-btn">Tue 24 Step</a></li>                                                                                                     
     <li><a href="#">Mon 27 Step</a></li>                                                                                                    
     <li><a href="#">Wend 28 Step</a></li>                                                                                                   
    </ul>                                                                                                
   </div>                                                                                
  </div>

  <div id="slide3" class="slide">                                                                                    
   <div class="hour-table">                                                                                              
    <ul class="hour-list" >                                                                                                  
     <li><a href="#" class="active-btn">Tue 24 Step</a></li>                                                                                                     
     <li><a href="#">Mon 27 Step</a></li>                                                                                                    
     <li><a href="#">Wend 28 Step</a></li>                                                                                                   
    </ul>                                                                                                
   </div>                                                                                
  </div>
</div>
   </code>
</pre>

/ ***********自定义轮播********* /

$(window).on('load',function(){

var Stack = new Array();
var count = 0;

$('img').attr('draggable', false);

$('.TAMcarousel').each(function(){
    carousel(count, this);
    count++;    
});


function carousel(count, TAMcarousel){

Stack[count] = new Array();

$( TAMcarousel ).height($(TAMcarousel).find('#slide3').height());

$(window).resize(function() {
  $( TAMcarousel ).height($(TAMcarousel).find('#slide3').height());
});


$(TAMcarousel).find('.slide').each(function(){
Stack[count].push($(this));
})


var animating=false;

var child = $(TAMcarousel).find(".right-btn");

$(TAMcarousel).find(".right-btn").on('click', moveright);

function moveright(){   

    if(animating)return;
    animating=true;

    // Move the slides
    Stack[count][1].animate({left: '-100%'},
                            {step: function( now, fx )
                            {
                             Stack[count][2].css( "left", 
   ((now+100)+'%'));
                            },done: function()
                            {
                            // move slide references in arrays
                            Stack[count].push(Stack[count][0]); // move 
  first slide to the end
                            Stack[count].shift();//remove first element 
 in array
                            // move actual slides 
                            Stack[count][0].css({left: '-100%'},0);
                            Stack[count][2].css({left: '100%'},0);
                            animating=false;
                            }
                            });
};  

$(TAMcarousel).find(".left-btn").on('click', moveleft);

function moveleft(){

    console.log(Stack[count]);

    if(animating)return;
    animating=true; 

    Stack[count][1].animate({left: '100%'},
                            {step: function( now, fx )
                            {
                             Stack[count][0].css( "left", ((now- 
100)+'%'));
                            }
                            ,done: function()
                            {
                            // move slide references in arrays
                            Stack[count].unshift(Stack[count] 
[((Stack[count].length)-1)]); // copy last slide to the start
                            Stack[count].pop();//remove first slide in 
array
                            // move actual slides 
                            Stack[count][0].animate({left: '-100%'},0);
                            Stack[count][2].animate({left: '100%'},0);
                            animating=false;
                            }
                            });
};  


// cheack for display none the left chevron button 

// End cheack for display none the left chevron button



} /* END of carousel function */


}); /* END of window onload */

0 个答案:

没有答案