javascript - 通过更改边距构建 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>";