Question

我正在尝试使用HTML / CSS创建一个简单的图片幻灯片，但是我从服务器显示图像时遇到了一个小问题。前两个图像显示在左上角，但它们应显示在缩略图列表下方。

这是一个jsfiddle demo http://jsfiddle.net/qHyAG/

你可以帮我解决一下。

HTML：

<div class="slideshow">
    <ul>
        <li>

            <img src="http://farm9.staticflickr.com/8288/7843768142_531a2de876_m.jpg" />
            <!-- 
                The slide contents inside DIV. 
                Put anything you like to show.
            -->
            <div>
                 <img src="http://farm9.staticflickr.com/8288/7843768142_531a2de876_m.jpg" />                 <p>Relaxing calm waters back home in <a href="http://ilo.wikipedia.org/wiki/Samboan,_Cebu" target="_blank">Samboan</a>, Cebu, Philippines.</p>
            </div>
        </li>
        <li>

            <img src="http://farm9.staticflickr.com/8319/7988784175_f662ddb020_m.jpg" />
            <div>

                    <img src="http://farm9.staticflickr.com/8319/7988784175_f662ddb020_m.jpg" alt="Summer Pebbles" />

                <p>What a nice place to spend summer. Those mountains belong to Bais, Negros, Philippines</p>
            </div>
        </li>
        <li>
            <img src="images/fluvial_parade.jpg" />
            <div>
                <img src="images/fluvial_parade.jpg" alt="Fluvial Parade" />

                <p>The fluvial parade commemorating the arrival of Child Jesus Christ in Cebu City and the birth of Christianity in the Philippines.</p>
            </div>
        </li>
        <li>
            <img src="images/church_cross.jpg" />
            <div>
                <a href="images/church_cross.jpg" title="Click to see full image" target="_blank">
                    <img src="images/church_cross.jpg" alt="Church Cross" />
                </a>
                <p>Not sure where we took this picture but it's magestic.</p>
            </div>
        </li>
        <li>
            <img src="images/fluvial_parade.jpg" />
            <div>
                <a href="images/fluvial_parade.jpg" title="Click to see full image" target="_blank">
                    <img src="images/fluvial_parade.jpg" alt="Fluvial Parade" />
                </a>
                <p>The fluvial parade commemorating the arrival of Child Jesus Christ in Cebu City and the birth of Christianity in the Philippines.</p>
            </div>
        </li>
        <li>
            <img src="images/fluvial_parade.jpg" />
            <div>
                <a href="images/fluvial_parade.jpg" title="Click to see full image" target="_blank">
                    <img src="images/fluvial_parade.jpg" alt="Fluvial Parade" />
                </a>
                <p>The fluvial parade commemorating the arrival of Child Jesus Christ in Cebu City and the birth of Christianity in the Philippines.</p>
            </div>
        </li>
        <li>
            <img src="images/fluvial_parade.jpg" />
            <div>
                <a href="images/fluvial_parade.jpg" title="Click to see full image" target="_blank">
                    <img src="images/fluvial_parade.jpg" alt="Fluvial Parade" />
                </a>
                <p>The fluvial parade commemorating the arrival of Child Jesus Christ in Cebu City and the birth of Christianity in the Philippines.</p>
            </div>
        </li>
        <li>
            <img src="images/fluvial_parade.jpg" />
            <div>
                <a href="images/fluvial_parade.jpg" title="Click to see full image" target="_blank">
                    <img src="images/fluvial_parade.jpg" alt="Fluvial Parade" />
                </a>
                <p>The fluvial parade commemorating the arrival of Child Jesus Christ in Cebu City and the birth of Christianity in the Philippines.</p>
            </div>
        </li>
        <li>
            <img src="images/fluvial_parade.jpg" />
            <div>
                <a href="images/fluvial_parade.jpg" title="Click to see full image" target="_blank">
                    <img src="images/fluvial_parade.jpg" alt="Fluvial Parade" />
                </a>
                <p>The fluvial parade commemorating the arrival of Child Jesus Christ in Cebu City and the birth of Christianity in the Philippines.</p>
            </div>
        </li>
        <li>
            <img src="images/fluvial_parade.jpg" />
            <div>
                <a href="images/fluvial_parade.jpg" title="Click to see full image" target="_blank">
                    <img src="images/fluvial_parade.jpg" alt="Fluvial Parade" />
                </a>
                <p>The fluvial parade commemorating the arrival of Child Jesus Christ in Cebu City and the birth of Christianity in the Philippines.</p>
            </div>
        </li>
    </ul>
</div>

CSS：

.slideshow {
    font-family:Arial, Helvetica, sans-serif;
    width:840px; /* changed */
    height:500px;
    overflow:hidden;
    background-color:#000000;
    color:#FFFFFF;
    border:5px solid #99CC00;
}
.slideshow > ul {
    margin: 0;
    padding: 0;
}
.slideshow > ul > li {
    display:inline;
    margin:0px;
    padding:0px;
    font-size:1px;
    margin-right: -1px;
}
.slideshow > ul > li > div {
  display: none;
  text-decoration: none;
  float:left;
}
.slideshow > ul > li > div > p {
  font-size:11px;
  text-align:center;
  padding:10px 0px 0px 0px;
  margin:0px;
  color:#FFFFFF;
}
.slideshow > ul > li > div > a > img {
    border:2px solid #FFFFFF;
    width:532px; /* changed */
    height:300px;
}

.slideshow > ul > li > div > img {
    border:2px solid #FFFFFF;
    width:532px;
    height:300px;
}

[id^="my_video"] {
    width:500px;
    height:250px;
}

.slideshow  > ul > li > img {
    border:2px solid #FFFFFF;
    margin:0px;
    padding:0px;
    width:80px;
    height:60px;
}
/* Shows slides when mouse pointer is over a thumbnail image */
.slideshow > ul > li:hover > div {
    display: block;
}
/* Highlights the thumbnail image when mouse pointer is over it */
.slideshow > ul > li:hover > img {
    border-color:#FF6600;
}

Answer 1

.slideshow > ul > li > div {
    display: none;
    text-decoration: none;
    float:left;
    position:absolute;
}

DEMO

简单的HTML / CSS幻灯片显示无法正常工作

1 个答案: