1

我正在尝试使用 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();
});
4

1 回答 1

0

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

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

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

这告诉浏览器<li>默认隐藏所有 - 元素，除了具有 class 的元素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>
于 2020-12-03T15:08:37.587 回答