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>";

通过更改边距来构建jquery幻灯片

1 个答案: