用于幻灯片放映的Ajax无法正常工作

Question

我似乎并不清楚它是如何工作的。当我调用get ajax方法时，索引不应该更改，因此幻灯片应该更改，或者我没有得到关于此的内容。

PHP / HTML

$(function () {
    var arrPix = $('#json_pics').val();
    var arrPix = $.parseJSON( arrPix );


    var index = 0;

    var $slider = $('#slider');
    var $slides = $slider.find('.slides');
    var $slide = $slides.find('.slide');
    var $next = $slides.find('.next');
    var $previous = $slides.find('.previous');
    var $caption = $slides.find('.caption');

    var slide_length = $slide.length;

    $slider.hover(function() {
            $caption.css('opacity', '1');
            $next.css('opacity', '1');
            $previous.css('opacity', '1');
        }, function() {
            $caption.css('opacity', '0');
            $next.css('opacity', '0');
            $previous.css('opacity', '0');
        }
    );
    $next.click(function() {
        index++;
        $.get("gallery_.php?index=" + index);

    });
});

的Javascript

json.Marshal

编辑：我应该使用加载吗？

Answer 1

努力为您提供解决方案

• 使用AJAX
• 并使用PHP，

我建议如下。

＆＃39;的 getpic.php ＆＃39;

摘要：（一个新文件......用于简化获取新图片的过程。）

说明：包含一个为您的图库中的下一个图片生成<img>标记和相关信息的函数。

$dir = /*whatever it is*/;
$pix_array = array("image1.jpg", "image2.png", "orWhateverElse.gif" /*etc.*/);
$descriptions = /*whatever they are*/;
$titles = /*whatever they're supposed to be*/;

function priWrap($index) {
    /*
    This handles the actual generating of the <img> tag as well as
    the caption and such.
    $index refers to a specific picture in $pix_array.
    */

    global $pix_array, $dir, $titles, $descriptions;

    $arr_len = count($pix_array);

    if ($index < 0) {
        $index = $arr_len-1;
        }
    else if { $index >= $arr_len) {
        $index = 0;
        }

    echo "<div class='pic'>
              <img src='" . $dir . $pic_array[$index] . "' data-ind='$index' />
          </div>
    <div class='caption'>
            <p id='title'>" . $titles[$index] . "</p>
            <p id='des'>" . $descriptions[$index] . "</p>
        </div>";
    }

#let's get it set up to handle AJAX calls
if (isset($_GET['index'])) {
    $index = intval($_GET['index']);
    priWrap($index);
    }

更改为＆＃39; gallery_.php ＆＃39;

您发布的代码现在应如下所示：

require_once('getpic.php');

echo "<div id='slider'>
    <ul class='slides'>

        <li class='slide'>
            <div id='picWrapper'>";

echo priWrap($index) . "
            </div><!--End #picWrapper-->
            <div class='next'>
                <i class='fa fa-arrow-right fa-2x'></i>
            </div>    
            <div class='previous'>
                <i class='fa fa-arrow-left fa-2x'></i>
            </div>
       </li>";

echo "</ul>  
  </div>
  </body>
  </html>";

$conn->close();

?>

您的 javascript 也需要更改。

var index = 0;

应该是

var index = parseInt($(".pic img").attr("data-ind"));

和

$next.click(function() {
    index++;
    $.get("gallery_.php?index=" + index);

});

应该是

$next.click(function() {
    index++;
    $("#picWrapper").load("getpic.php?index=" + index,
        /*Add callback so that index is updated properly.*/
        function () {
             //update our index
             index = parseInt($(".pic img").attr("data-ind"));
             //show our caption stuff...
             $(".caption").css('opacity', '1');
             }
        );

});