Question

我正在尝试创建一个非常简单的图像滑块。虽然它很简单，但我正在这样做，我必须输入太多的组合。

这就是我所拥有的：

<script>
        $(document).ready(function(){

            $('#1').show();
            $('#2').hide();
            $('#3').hide();

            $("next-btn").click(function(){

                $("#1").hide();
                $("#2").show();

            });
        });
  </script>

</head>
<body>

    <div id="slider">
        <div id="1" class="slide"><img src="slide-image-1" alt="" /></div>
        <div id="2" class="slide"><img src="slide-image-2" alt="" /></div>
        <div id="3" class="slide"><img src="slide-image-3" alt="" /></div>
    </div>
    <div id="previous-btn">Previous slide</div>
    <div id="next-btn">Next slide</div>

正如你可以通过jquery代码看到的，我要去的方式我必须根据隐藏的图像输入不同的onclick，等等。

如何更改此设置以便它可以转到下一个或上一个div并在单击任一按钮时显示它而无需添加太多组合？

Answer 1

此代码应该可以正常运行（已测试）。我希望你能得到这个想法:)。

<script>
    var active = 0;
    var n = $('#slider div').length; // number of divs...
    $(document).ready(function(){
        showElement(1);
        $("#next-btn").click(function(){
            if (active < n) showElement(active + 1);
        });
        $("#previous-btn").click(function(){
            if (active > 1) showElement(active - 1);
        });
    });
    function showElement(id) {
        $('#slider div').hide();
        $('#' + id).show();
        active = id;
    }
</script>

active存储显示的元素数量。当您展示其他内容时，您会隐藏所有内容，并仅显示您需要的内容。 n用于存储最大数量的元素，因此您不会超出范围。

顺便说一下，这不是最节省内存的解决方案，但修改它非常简单，而且非常灵活。说实话，你应该跟踪显示哪个幻灯片，哪个是隐藏的，只隐藏显示的幻灯片，并只显示你需要的幻灯片。但是如果只有很少的幻灯片（100？），性能差距在这里不会成为问题，虽然代码的清晰度和未来的可扩展性在这里要好得多。

此外，如果将来出现问题，每次用户点击某些内容时，showElement函数都会修复它：隐藏所有内容，并只显示您需要的内容。

在此链接下查看有效的解决方案：http://codepen.io/anon/pen/XbPogg

BTW：您可以在html标记中添加更多幻灯片（id = 1,2,3,4,5,6 ......），此脚本无需任何更改即可正常运行。

JQuery Onclick隐藏/显示 - 下一课或上一课

1 个答案: