Question

我在尝试使用Ajax的滑块式jQuery插件时遇到了很多麻烦。我正在尝试使用幻灯片创建弹出窗口。但是，最初，它根本行不通。图像只是以列表格式显示，好像我根本没有使用插件。所以，我试图使用其中一个插件方法进行测试。现在我收到错误：slider.unslider不是一个函数。为什么会这样？

base.js

$(document).ready(function() {
    $("#sandwichMenu").hide();
    $(".videoContainer").hide();
    $("#sliderBody").hide();
    $("#reminderContent").hide();

    timerVar = setTimeout(getSlideshow, 1000 * 60 );
    checkTime = setInterval(checkReminder, 1000 * 60);
    var slider = $("#slider").unslider({ autoplay: true, nav: false, arrows: false });

    slider.on('unslider.ready', function() {
        alert('Slider is set up!');
    });

    document.onmousemove = function() { clearTimeout(timerVar); timerVar = setTimeout(getSlideshow, 1000 * 60 ); }
    document.onkeypress = function() { clearTimeout(timerVar); timerVar = setTimeout(getSlideshow, 1000 * 60 ); }
    document.onclick = function() { clearTimeout(timerVar); timerVar = setTimeout(getSlideshow, 1000 * 60 ); }

    $('#thumbGallery').magnificPopup({
        delegate: 'a',
        type: 'image'
    });

    $('.vidButton').click(function() {
        $(".vidButton").removeClass('active');
        $(".videoContainer").hide();
        $($(this).attr("href")).show();
        $(this).addClass("active");
    });

    $("#sandwichButton").click(function() {
        $("#sandwichMenu").toggle();
    });

    $("#sliderBody").click(function() {
        $("#sliderBody").hide();
    });

    $("#reminderContent").click(function() {
        $("#reminderContent").hide();
    });
});

function getSlideshow() {
    $.ajax({
        url: "php/slideshow.php",
        dataType: "html",
        success: function(data) {
            $("#slider").html(data);
            slider.unslider("start");
            $("#sliderBody").show();
        }
    });

    clearTimeout(timerVar); timerVar = setTimeout(getSlideshow, 1000 * 60 );
}

function checkReminder() {
    $.ajax( { 
        url: "php/checkReminder.php",
        success: function(data) {
            if(data != "false") {
                $("#reminderContent").html(data);
                $("#reminderContent").show();
            }
        }
    });
}

slideshow.php（由相关的Ajax函数引用）

<?php

include_once("databaseAccess.php");
include_once("dbEntities.php");
$dbContext = new databaseAccess();

// get number of messages
if (!isset($_SESSION)) {
    session_start();
}

$images = $dbContext->getScreenSaver();
$htmlString = "<ul>";

foreach($images as $image) {
    $htmlString .= "<li><img class='img-responsive' src='img/screensaver/" . $image->imgPath . "' /></li>";
}

$htmlString .= "</ul>";
echo $htmlString;
exit();

footer.php（包括相关脚本）

<footer> <div class="row"><div class='col-md-12'>
Copyright <?php echo date("Y"); ?>
Midamerica Hotels Corporation || All Rights Reserved </div></div></footer> </div>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="scripts/popup.js"></script>
<script src="scripts/bootstrap.js"></script>
<script src="scripts/unslider.js"></script>
<script src="scripts/base.js"></script>
<script>
</div>
</body>
</html>

非常感谢您的帮助。

jQuery插件 - slider.unslider不是一个函数

0 个答案: