在jquery幻灯片上显示标题和描述

daneh 发表于 Dev

达内

我有一个初步的jquery幻灯片演示，我试图覆盖其标题和描述（从标题开始）。幻灯片的显示方式是通过将图像的宽度更改为左边距。现在，所有标题都在彼此之上，而不是每个图像一个。我也打算为此实现下一个和上一个按钮，因此不用单击图像，我将拥有下一个和上一个功能。

编辑：好的，显然我不清楚我的问题。现在，所有标题都相互堆叠，如何将标题显示在正确的图像上。

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 "<div id='slider'>
        <ul class='slides'>";
for ($x=0; $x < count($pic_array); $x++) {
    echo " <li class='slide'><img src= " . $dir . $pic_array[$x] . " /></li>";
    echo " <li class='title'>$titles[$x]</li>";
}
echo "   </ul>  
      </div>";

的CSS

#slider {
    width: 450px;
    height: 250px;
    overflow:hidden;
    position:relative;
}
#slider .slides {
    display: block;
    width:10000px;
    height: 250px;
    margin:0;
    padding:0;

}
#slider .slide {

    float: left;
    list-style-type: none;
    width: 450px;
    height: 250px;
}
img {
    width: 450px;
    height: 250px;
}
.title {
    position:absolute;
    right:0;
    bottom:0px;
    padding: 1rem;
    left:0;
    color:white;
    background-color: rgba( 0, 0, 0, 0.25);
}

Java脚本

$(function() {
    var width = 450;
    var slide_number = 0;

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

    $slider.click(function () {
        $slides.animate({'margin-left': '-=' + width}, 0, function () {
            slide_number++;
            if (slide_number == $slide.length ) {
                slide_number = 0;
                $slides.css('margin-left', 0);
            }
        });
    });

});