通过更改余量来构建jQuery幻灯片

Question

我正在尝试从PHP中的一系列图像创建jQuery幻灯片。我已经设置了HTML和CSS，但是JavaScript没有做任何事情。如果我想做的事情是不可能的，或者有更好的替代路线，我会很乐意接受该建议。任何帮助将不胜感激！

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 "   </ul>  
      </div";

CSS

#slider {
    width: 450px;
    height: 250px;
    overflow:hidden;
}
#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;
}

javascript

$(function() {
    setInterval (function () {
        $('.slider .slides').animate({'margin-top':'-=250px'}, 1000);
    }, 3000);
});

Answer 1

您的jQuery选择器错误。它应该是$('#slider .slides')，因为slider是ID，而不是类。

另外，您缺少ul元素中的闭合角括号：...<ul class='slides'>";和div#slider元素：...</div>";