jQuery的 - 显示/隐藏滑块前prev /下一步按钮

我试图控制一个非常基本的滑块（从简单的例子在线修补）导航。

我的目标是在到达最后一张幻灯片时隐藏“下一步”按钮，相反地在第一张幻灯片中隐藏“上一页”按钮，可以通过捕捉“活动”（当前幻灯片显示）上课，然后隐藏它？

我的相关代码如下：jQuery的 - 显示/隐藏滑块前prev /下一步按钮

jQuery(document).ready(function ($) { 

//set vars for slider size 
var slideCount = $('#slider ul li').length; 
var slideWidth = $('#slider ul li').width(); 
var slideHeight = $('#slider ul li').height(); 
var sliderUlWidth = slideCount * slideWidth; 

$('#slider').css({ width: slideWidth, height: slideHeight }); 

$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); 

$('#slider ul li:last-child').prependTo('#slider ul'); 
//move left function (prev) 
function moveLeft() { 
    $('#slider ul').animate({ 
     left: + slideWidth 
    }, 700, function() { 
     $('#slider ul li:last-child').prependTo('#slider ul'); 
     $('#slider ul').css('left', ''); 
    }); 
}; 
//move right function (next) 
function moveRight() { 
    $('#slider ul').animate({ 
     left: - slideWidth 
    }, 700, function() { 
     $('#slider ul li:first-child').appendTo('#slider ul'); 
     $('#slider ul').css('left', ''); 
    }); 
}; 
// call functions on click 
$('a.control_prev').click(function() { 
    moveLeft(); 
}); 

$('a.control_next').click(function() { 
    if ($(this).hasClass('final')){ 
    $('a.control_next').hide(); 
    } 
    else{ 
     moveRight(); 
    } 
}); 

});

和HTML滑块列表：

<div id="slider"> 
<a href="#" class="control_next">></a> 
<a href="#" class="control_prev"><</a> 
    <ul> 
    <li><img src="sme1.png" height="550"/></li> 
    <li><img src="sme2.png" height="550"/></li> 
    <li><img src="sme3.png" height="550"/></li> 
    <li class="final"><img src="sme4.png" height="550"/></li> 
    </ul> 
</div>

我能想到的接近它的不同的方式，但是这是解决方案，我就试图解决锻炼，任何帮助赞赏！

jsfiddle：http://jsfiddle.net/o31ksujt/3/

来源

2014-12-02 Andyjm

我已经包括了所有的jQuery和相关HTML，感谢 – Andyjm 2014-12-02 15:50:03

我刚刚创建了一个的jsfiddle并不能得到它做任何事情。你能在这里创建一个片段，或者是一个重现此问题的jsFiddle吗？ – j08691 2014-12-02 15:54:08

你忘了你的CSS也添加了，否则我们不能在jsfiddle中使用它。或者只是为我们做一个工作jsfiddle – Stefan 2014-12-02 15:55:00

您可以在动画结尾添加控件。

在您的代码中也出现错误，在您的点击函数中您验证了$(this).hasClass('final')，但是相对于标签a，您必须指定$('#slider ul li:first-child')。

解决方案如下。

创建新功能

功能verifyControlButton（）{ 如果（$（ '＃滑块UL李：第一胎'）。hasClass（ “最终”））{ $（'一个。 control_next'）隐藏（）;其他{ } else {（'a.control_next'）。show（）; } };
设置呼叫到新的方法，在你的移动动作：

//向左移动功能（分组）功能moveLeft（）{ $（ '＃滑块UL'）动画（{ 左： + slideWidth }，700，function（）{（'＃slider ul li：last-child'）。prependTo（'＃slider ul'）; $（'＃slider ul'）.css（'left' ，'）; verifyControlButton（）; }）; }; //向右移动功能（下）功能MoveRight的（）{ $（ '＃滑块UL'）动画（{ 左： - 。slideWidth }，700，函数（）{ $（'＃滑块UL李：'first'）。appendTo（'＃slider ul'）; $（'＃slider ul'）.css（'left'，''）; verifyControlButton（）; }）; };
点击控制通话简单的方法。在点击（{） moveLeft（; }（）函数）

//调用函数 $（ 'a.control_prev'）点击。

$（'a.control_next'）。点击（功能（）{ moveRight（）; }）;

http://codepen.io/anon/pen/gbaoxK

来源

2014-12-02 16:35:38 Marino

谢谢，这肯定适用于'最后'幻灯片（幻灯片4），所以我第一个可以使用相同的逻辑。 – Andyjm 2014-12-03 09:41:45

jQuery的 - 显示/隐藏滑块前prev /下一步按钮

回答

相关问题