Question

我正在尝试在一个非常基本的滑块中控制导航（从简单的在线示例拼凑而成）。

我的目的是在到达最后一张幻灯片时隐藏“下一步”按钮，并相反地隐藏第一张幻灯片上的“上一页”按钮，这可以通过捕获一个“活动”（当前幻灯片显示）类来完成隐藏吗？

我的相关代码如下：

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/

Answer 1

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

在您的代码中也出现错误，您在点击功能中验证$(this).hasClass('final')，但与标记a相关，您必须指定$('#slider ul li:first-child')。

解决方案可以如下。

创建新功能

function verifyControlButton（）{ if（$（'＃slider ul li：first-child'）。hasClass（“final”））{ $（ 'a.control_next'）隐藏（）。 }其他{ $（ 'a.control_next'）显示（）。 } };
在移动操作中设置对新方法的调用：

//向左移动功能（上一个） function moveLeft（）{ $（'＃slider ul'）。animate（{ left：+ slideWidth }，700，function（）{ $（'＃slider ul li：last-child'）。prependTo（'＃slider ul'）; $（'＃slider ul'）。css（'left'，''）; verifyControlButton（）; }）; }; //向右移动功能（下一个） function moveRight（）{ $（'＃slider ul'）。animate（{ 左： - slideWidth }，700，function（）{ $（'＃slider ul li：first-child'）。appendTo（'＃slider ul'）; $（'＃slider ul'）。css（'left'，''）; verifyControlButton（）; }）; };
点击控制调用简单的方法。

//点击时调用函数 $（'a.control_prev'）。click（function（）{ 向左移动（）; }）;

$（'a.control_next'）。click（function（）{ 向右移（）; }）;

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

jQuery - 在滑块中显示/隐藏上一个/下一个按钮

1 个答案: