0

我正在制作一个应该使用 ajax 从数据库中获取图像，然后使用一些轮播插件显示它。这是它应该如何工作的：

  1. 图片 url 从管理员保存到数据库
  2. 前端脚本对 php 文件进行 ajax 调用并从 db 返回所有 url。
  3. 现在，当我拥有所有图像时，可以应用轮播插件。
  4. 图像现在一张一张显示。

诀窍是我想在显示最后一个图像时进行另一个 ajax 调用，并用数据库中的新图像重新填充容器 div。这是我的代码

function get_images(){
var data = {
    "function_name" : "get_images",
    "args" : ""
};

$.ajax({
    type : "POST",
    url : "http://localhost/.../functions.php",
    data : data,
    dataType : "JSON",
    success : function(ret){
        $(".container").html(ret);
        $(".container").carousel(//When last call - function again);

    }
});
}

这就是问题所在。在 ajax 成功轮播插件开始旋转 imgs 时，应该再次调用 get_images 函数。但是这个函数已经在另一个函数中，每次调用它都会更深一层。有没有办法做到这一点？

4

2 回答 2

1

也许在你的 PHP 脚本中：

<?php
    if ( isset($_POST['function_name']) ) {
        if ( $_POST['function_name'] == 'get_images' ) {
            // Get some URLs into an array...
            // For the sake of the example we'll manually fill the array
            $urls = ['img/image1.png', 'img/image2.png'];
            echo json_encode($urls);
        }
    }

在你的 JS 中：

function Carousel() {
    this.getMoreImages();
}

Carousel.prototype.nextImage = function () {
    if (this.i < this.images.length) {
        this.showImage(); // Implement this.
        this.i += 1;
        this.spin():
    }
    else {
        this.getMoreImages();
    }
}

Carousel.prototype.spin = function () {
    var self = this;
    setTimeout(function () {
        self.nextImage();
    }, 5000);
}

Carousel.prototype.getMoreImages = function () {
    var self = this;
    $.ajax({
        type : 'POST',
        url : 'http://localhost/.../functions.php',
        data : data,
        dataType : 'JSON',
        success : function (ret) {
            self.images = JSON.parse(ret);
            self.i = 0;
            self.spin();
        }
    });
}

var myCarousel = new Carousel();

这个 Carousel 对象将在实例化时请求一组图像，并以 5 秒的间隔显示每个图像。当所有图像都用完后，它会自动进行另一个 AJAX 调用，以与最初相同的方式检索图像，然后继续循环遍历新图像。它将永远在这个循环中继续下去。

于 2013-09-29T22:27:05.220 回答
1

最好的办法是让轮播触发一个需要更多图像的事件并收听该事件。然后，您可以检索更多图像并将新列表返回到轮播。有所有这些内置的轮播插件。我经常使用这个：http ://caroufredsel.dev7studios.com/

于 2013-09-29T21:40:59.123 回答