简单的Javascript幻灯片功能不起作用

Simple Javascript slide function not working

本文关键字：功能不起作用幻灯片 Javascript 简单更新时间：2023-09-26

我是Javascript的新手，我正在尝试用图像制作一个简单的'幻灯片'。这是我的代码，放它不起作用，它正常加载 html 代码，忽略"隐藏"功能：怎么办？

    <script type="text/javascript">
        $(function() {
            var tot = $(".slide").length,
            current = 1
            $(".slide").not(":first").hide()
            $("#next").click(function () {
            if (current+1 > tot) return false
            $(".slide:visible").hide().next().show()
            current++
            })
            $("#prev").click(function () {
            if (current-1 < 1) return false
            $(".slide:visible").hide().prev().show()
                current--
            })
        })
    </script>
    <div id="slide_container">  
            <div class="slide">
                <p>Step 1 explained</p>
                <img src="images/android.png" border="none"/>
            </div>
            <div class="slide">
                <p>Step 2 Explained</p>
                <img src="images/apple.png" border="none"/>
            </div>
            <div class="slide">
                <p>Step 3 explained</p>
                <img src="images/windows.png" border="none"/>
            </div>
            <div>
                <button id="prev">Prev</button>
                <button id="next">Next</button> 
            </div>
    </div>

谢谢！

为了

清楚起见，我重新格式化了您的代码并添加了一些分号;，我还更改了当前和总计的索引，一切似乎都很好，我使用以下 JavaScript 创建了一个 jsFiddle，一切似乎都很好。试一试

$(function()
{
    var total = $(".slide").length;
    var current = 0
    $(".slide").not(":first").hide()
    $("#next").click(function ()
    {
        if (current + 1 >= total)
        {
            return false;
        }
        $(".slide:visible").hide().next().show();
        current++
    })
    $("#prev").click(function ()
    {
        if (current <= 0)
        {
            return false;
        }
        $(".slide:visible").hide().prev().show();
        current--;
    });
})

我希望您在在此处提供的脚本块之前添加Jquery引用。只是一个想法。