如何使用 jQuery 连接按钮单击功能以移动幻灯片？答案

【问题标题】：How to connect button click function for move slide with jQuery?如何使用 jQuery 连接按钮单击功能以移动幻灯片？
【发布时间】：2021-03-15 13:52:36
【问题描述】：

我正在尝试使用 jQuery 创建一个按钮单击功能来左右滑动。

<a href="#" class="goingright point"></a>
                        <a href="#" class="goingleft point"></a>
                        <div class="pfarea">
                            <p class="guide">CLICK TO FOLLOW LINK<span>&#33;</span></p>
                            <ul class="pf_item">
                                <li class="pf1">
                                    <div class="pf_item_wrap">
                                        <div class="pf_preview">
                                            <img src="" alt="">
                                        </div>
                                    </div>
                                </li>
                                <li class="pf2 on">
                                    <div class="pf_item_wrap">
                                        <div class="pf_preview">
                                            <img src="" alt="">
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="pf_item_wrap">
                                        <div class="pf_preview">
                                            <img src="" alt="">
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="pf_item_wrap">
                                        <div class="pf_preview">
                                            <img src="" alt="">
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="pf_item_wrap">
                                        <div class="pf_preview">
                                            <img src="" alt="">
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>

如果我点击按钮 class="goingleft"，幻灯片应该移到左侧。如果我单击按钮 class="goingright"，它们会移动到右侧。我构建了这样的功能，但这根本不起作用......有人可以帮助我吗？

var currentIdx = 0;
var slideLength = $('.pf_item > li').length;


function goingleft() {
  if (currentIdx !== (slideLength - 1)) {
    currentIdx += 1;
  } else {
    currentIdx = 0;
  }
}
function goingright()  {
  if ((slideLength - 1) !== currentIdx) {
    currentIdx -= 1;
  } else {
    currentIdx = (slideLength - 1);
  }
}
$('.goingleft').click(function(){
  goingleft();
});
$('.goingright').click(function(){
  goingright();
});

【问题讨论】：

标签： jquery indexing slide

【解决方案1】：

您的方法是正确的，但您的代码中遗漏了一些类修改以使不同的幻灯片可见或不可见。

首先 - 在您的 <head> 部分定义一些样式：

<style>
li {
    display:none;
}
.on {
    display:block;
}
</style>

这告诉浏览器默认隐藏所有<li>元素，除了具有on类的元素。通过为每个列表项删除/添加on-class，您将能够隐藏/显示每张幻灯片。

在您的 HTML 部分中，我已经在您有图像标签的地方编写了文本。您可以简单地使用图像。我还为您的“按钮”添加了文本 LEFT 和 RIGHT：

<a href="#" class="goingleft point">LEFT</a>
<a href="#" class="goingright point">RIGHT</a>
<div class="pfarea">
    <p class="guide">CLICK TO FOLLOW LINK<span>&#33;</span></p>
    <ul class="pf_item">
        <li class="on">
            <div class="pf_item_wrap">
                <div class="pf_preview">
                    SLIDE 1
                </div>
            </div>
        </li>
        <li>
            <div class="pf_item_wrap">
                <div class="pf_preview">
                    SLIDE 2
                </div>
            </div>
        </li>
        <li>
            <div class="pf_item_wrap">
                <div class="pf_preview">
                    SLIDE 3
                </div>
            </div>
        </li>
        <li>
            <div class="pf_item_wrap">
                <div class="pf_preview">
                    SLIDE 4
                </div>
            </div>
        </li>
        <li>
            <div class="pf_item_wrap">
                <div class="pf_preview">
                    SLIDE 5
                </div>
            </div>
        </li>
    </ul>
</div>

现在，最后您需要使用代码对按钮点击做出反应。当用户单击按钮时，索引会增加/减少，然后将 on-class 移动到正确的幻灯片上，从而使其可见：

<script>
    var currentIdx = 2;
    var slideLength = $('.pf_item > li').length;

    function goingleft() {
        if (currentIdx > 1) {
            currentIdx--;
        } 
    }
    function goingright()  {
        if (currentIdx < (slideLength)) {
            currentIdx++;
        }
    }

    $('.goingleft').click(function(){
        goingleft();
        li_ref = "li:nth-child("+currentIdx+")";
        $("li").removeClass("on");
        $(li_ref).addClass("on");
    });
    $('.goingright').click(function(){
        goingright();
        li_ref = "li:nth-child("+currentIdx+")";
        $("li").removeClass("on");
        $(li_ref).addClass("on");
    });
</script>

【讨论】：