使用Jquery Ajax调用制作幻灯片

Question

我必须使用Ajax调用进行幻灯片显示（我已经通过更改左边距来实现，但是现在我需要这样做）。 我有一个从数据库中提取的php数组。 我需要以某种方式使用它来显示图像。 抱歉，我无法深入探讨此问题，我们将不胜感激。

PHP / HTML

$pic_array = array();
$titles = array();
$descriptions = array();
while ($row = $result->fetch_assoc()) {
    $pic_array[$count] = $row['pic_url'];
    $titles[$count] = $row['title'];
    $descriptions[$count] = $row['description'];
    $count++;
}

echo "<input id='json_pics' type='hidden' value='" . json_encode($pic_array) . "'/>";
echo "<input id='titles' type='hidden' value='" . json_encode($titles) . "'/>";
echo "<input id='descriptions' type='hidden' value='" . json_encode($descriptions) . "'/>";
echo "<div id='slider'>
        <ul class='slides'>
            <li class='slide'>
                <div class='pic'>
                    <img src= " . $dir . $pic_array[$x] . " />
                </div>
                <div class='caption'>
                    <p id='title'>$titles[$x]</p>
                    <p id='des'>$descriptions[$x]</p>
                </div>
                <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>
   </html>";

$conn->close();

?>

Java脚本

/**
 * Created by daneh_000 on 6/27/2016.
 */
$(function () {
    var arrPix = $('#json_pics').val();
    var arrPix = $.parseJSON( arrPix );

    var width = 450;
    var slide_number = 1;


    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() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (xhttp.readyState == 4 && xhttp.status == 200) {

            }
        }
        xhttp.open("POST", 'index.php', true);
        xhttp.send("index= slide_number");
    });
});

Answer 1

如果只需要ajax滑块：不需要自己编写。 您可以使用任何流行的滑块，例如http://bxslider.com并钩住slideChange（可以在每个滑块中执行此操作）。 例如：

$('ul.slides').bxSlider({
    pager: true,
    adaptiveHeight: true,
    infiniteLoop: true,
    onSlideBefore: function(slideElement, oldIndex, nextIndex) {
        $.get('/url/to/slide/' + nextIndex /*or slideElement.attr('slide-get-url') for example*/ , 
           function(response) {
            slideElement.html(response);
           }
        );

    }
});

如果要编写自己的滑块-第一条规则：它必须独立于后端。 Ajax请求必须返回一张（或多张）幻灯片的内部内容。 不外在。 JS只需要设置现有幻灯片（LI）的内容，或者必要时创建更多幻灯片。