Question

我正在jQuery中创建一个滑动列表，当手动测试向左移动图像时显示一个接一个显示的图像列表，显示下一个图像没有正确显示我可以弄清楚原因。这是我的HTML：

<div id="slider">
<ul class="pages">
    <li class="page">
        <a href="article.html" >
            <img src="images/iphone-5s2.jpg" alt="an iPhone 5S">
        </a>
    </li>
    <li class="page">
        <a href="#" >
            <img src"images/network-cables2.jpg" alt="Network cables">
        </a>
    </li>
    <li class="page">
        <a href="#" >
            <img src"images/black-keyboard2.jpg" alt="Close up of a black keyboard">
        </a>
    </li>
</ul>

这是我的CSS：

    #slider{
    width:900px;
    height:500px;
    overflow:hidden;
    /*position: relative;
    margin: 0px auto*/
}

#slider .pages {
    display: block;
    width: 5000px;
    height: 500px;
    margin: 0;
    padding: 0;
}

#slider .page {
    float: left;
    list-style-type: none;
    width: 900px;
    height: 500px;
}

以下是我移动图片以显示第二张图片无法正常显示的屏幕截图：！1

所有图片都在同一个文件夹中，如果我更改订单，则每次只加载第一个图片。

Answer 1

属性=后缺少src，因此忽略此属性且图片没有有效来源。

<img src="images/network-cables2.jpg" alt="Network cables">
<img src="images/black-keyboard2.jpg" alt="Close up of a black keyboard">
       ^^

仅显示第一张图像的ul图像

1 个答案: