使用Jquery Ajax调用制作幻灯片 - Making a slideshow work with Jquery Ajax calls

Making a slideshow work with Jquery Ajax calls

本文关键字：幻灯片调用 Jquery Ajax 使用 | 更新日期: 2023-09-26

我必须使用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();
?>

Javascript

/**
 * 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");
    });
});

如果您只需要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)的内容，或者在必要时创建更多的幻灯片。