图像滑块中的JS While语句

JS While statement in Image Slider

本文关键字:JS While 语句 图像      更新时间:2023-09-26

我正在尝试构建一个图像滑块,底部有一些小按钮,您可以单击这些按钮,它将显示相应的幻灯片。所以,如果你点击按钮#3,它会显示幻灯片#3…非常标准的东西。我使用javascript来检测有多少幻灯片,并显示相同数量的按钮。但现在我不知道如何将按钮连接到幻灯片上,这样当用户点击一个按钮时,它就会显示相应的数字幻灯片。我知道这一定是一项非常简单的任务,我只是不知道如何设置它。

我的脚本如下:

<script>
        $(document).ready(function() {
            var count = $(".slider_class").length;
            $("#slide_0").show();
            var i=0;
            while (i < count){
              $(".slider_bullets").append('<a href="#" id="bullet_link_' + i +'"><img src="img/slider_down.png" alt="slider_down" />');
              i++;
             }
        });
        </script>

.slider_class是我已应用于每一张幻灯片的类。每张幻灯片还有一个从零开始的数字id,因此第三张幻灯片是#slide_2。.slider_bullets是我刚才说的按钮。您会注意到,我为他们每个人都提供了一个唯一的指定id,该id引用了他们关联的幻灯片。

这就是我要使用的。$(".slider_bullets a").click(function(){ $(".slider_class").hide(); $("#slide_"+$(this).index()).show(); });