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 関数を再度呼び出す必要があります。しかし、この関数はすでに別の関数にあり、呼び出しを行うたびに 1 レベル深くなります。これを行う方法はありますか？

4

2 に答える 2

1

カルーセルがより多くの画像を必要とするイベントを起動し、そのイベントをリッスンするのが最善です。その後、さらに画像を取得して、新しいリストをカルーセルに返すことができます。このすべてが組み込まれているカルーセル プラグインがあります。私はよくこれを使用します: http://caroufredsel.dev7studios.com/

于 2013-09-29T21:40:59.123 に答える
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 に答える