Question

我使用了滑块，我发现了bug。我想在滑块上显示反分页，但我无法做到这一点。以当前页数/总页数（如1 / 4,2 / 4等）的形式。

  <div id="credit"><br>Slide No.<span id="count">1/4</span><br></div>

Answer 1

您可以修改左右按钮单击功能。另外，不要忘记相应地更新自动滑块。我也确定你可以在某个地方得到总指数，这样你就不必硬编码＆＃34; / 4＆＃34;部分。更新以下功能：

var leftArrow = $('<div>', {'class': 'jislider__left-arrow'}).click(function () {
                animate.control(--animate.index);
        document.getElementById("count").textContent = animate.index+"/3";
            });
var rightArrow = $('<div>', {'class': 'jislider__right-arrow'}).click(function () {
                animate.control(++animate.index);
        document.getElementById("count").textContent = animate.index+"/3"
            });

这还不够，你可能不应该对分母进行硬编码＆＃34; / 4＆＃34;部分也是如此。我不知道您使用的库，但我想这足以为您提供＆＃34; unique＆＃34;的总数。不同来源的div：

var x = Array.prototype.slice.call(document.querySelectorAll(".jislider__img"))
.map(function(d,i){return {node:d,url:getComputedStyle(d).backgroundImage}})
.reduce(function(ac,d,i,a){
    !ac.some(function(dd,ii){return dd.url === d.url})
        ? ac.push(d) 
        : void(0);
    return ac
},[]).map(function(d,i){
    return d.node;
})

在你的情况下，

x.length是3。所以虽然你有5个div，但你有3个图像。您也可以在下面的点中看到它（旋转木马中有3个点）。对于上面的左箭头和右箭头函数，请事先计算var l = x.length，然后您可以执行以下操作：

document.getElementById("count").textContent = animate.index+"/" + l;

因此您不必对其进行硬编码。我不得不修改你的滑块，一个工作小提琴：

https://jsfiddle.net/ibowankenobi/szwr20ec/5/

如何在滑块中对抗分页显示

1 个答案: