Question

我有一个初步的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);
}

Javascript

$(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);
            }
        });
    });

});

Answer 1

我不能定期评论你的主题，所以我会写在这里。

尽量不要给.title类位置绝对。他们都在彼此之上。

你的使用溢出隐藏，所以你的所有组件都需要450宽。

将标题和图片<div>合并为一个<li>。也许它解决了你的宽度问题。

祝你好运。

Answer 2

正如其中一些评论所示，主要问题是您使用position: absolute作为标题。一旦我们更改了它，然后将标题放入与图像相同的<li>（以便它们将一起移动），那就是它。

你Javascript不需要改变。您需要对CSS进行的唯一更改是.title类。以下是您需要的：

.title {
    position:relative;
    left:0;
    bottom:55px;
    padding: 1rem;
    left:0;
    color:white;
    background-color: rgba( 0, 0, 0, 0.25);
    float: left;
    list-style-type: none;
}

这里是更新后的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'>
        <div>
            <img src= " . $dir . $pic_array[$x] . " />
        </div>
        <div class='title'>$titles[$x]</div>
    </li>";
}
echo "   </ul>  
      </div>";

这是一个演示：https://jsfiddle.net/Lq85dcz9/

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

2 个答案: