1

我在使用 iframe 时遇到了一些麻烦。所以基本上我试图创建一个幻灯片，其中一张幻灯片是嵌入的视频，所以我使用 iframe 来做到这一点。好吧，幻灯片功能正常，视频大小调整正确，但是当图像幻灯片出现时，它们并没有像视频那样被放大到 iframe 的大小，而且它们似乎有 2 或 3px 的填充围绕顶部/左侧。我附上了 HTML 和 CSS 代码，并拍了一些照片来说明我想说的话，如果有人看到问题，我真的很感激一些帮助。非常感谢！

正确尺寸 位置不正确

CSS 代码

#imageDiv {
border: 5px solid black;
width:500px;
}
#slideshowImg {
width:500px;
height:300px;
margin:0px;
border-spacing:20px;
}
#mediaMenu table {
font-size:14px;
border:0;
margin-top:5px;
border-spacing:0;
}
table {
margin:0;
padding:0;
border-spacing:0
}
#mediaMenu td {
margin:0px;
padding:0px;
width:120px;
height:20px;
color:#CBE8E8;
}
.subMenu img {
width:100%;
height:100px;
}
.subTitle {
font-family:chalkboard, sans-serif;
background-color:#000;
font-size:12px;

}
.subTitle a {
color:#CBE8E8;
text-decoration:none;
}

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> ******* </title>
<link rel="stylesheet" type="text/css" href="" />
<script language="javascript" type="text/javascript">
slideshowImages = new Array(5);
slideshowImages[0] = new Image();
slideshowImages[0].src = 'images/tebowFinal.jpg';
slideshowImages[1] = new Image();
slideshowImages[1].src = 'images/nash.jpg';
slideshowImages[2] = new Image();
slideshowImages[2].src = 'images/kobe.jpg';
slideshowImages[3] = new Image();
slideshowImages[3].src = 'http://www.youtube.com/embed/9UlmwcEIWUw';
slideshowImages[4] = new Image();
slideshowImages[4].src = 'images/tbrown.jpg';
index=0;
function slideShow(source)
{
document.getElementById('slideshowImg').src = slideshowImages[source].src;
clearInterval(newPic);
index=source;
imageChange();
if (source=="3")
        {
            onclick=clearInterval(newPic);
        }
}
function slideshowForward() 
{
// increase the value of index by one or reset the value to 0 if all the slides have been cycled
index++;    
if(index >= 5) 
{
    index=0;
}
// set the image name to the slide show image
document.getElementById('slideshowImg').src = slideshowImages[index].src;
}
function imageChange() {
    newPic=setInterval(function(){slideshowForward() },5000);
}

</script>
<link href="slideshow.css" rel="stylesheet" type="text/css" />
</head>

<body onload="imageChange()">

<div id="imageDiv">
<table id="mediaMenu">
    <tr>
        <td id="imageRow" colspan="5" >
            <a href="#" onclick="clearInterval(newPic)">
            <iframe id="slideshowImg"  src="images/tebowFinalFinal.jpg" frameborder="0" scrolling="no" ></iframe>
            </a>
        </td>
    </tr>
    <tr>
        <td class="subMenu">
            <a href="#" onclick="slideShow(0)">
            <table> 
                <tr> <td class="subTitle"> Tebow Talks </td></tr>
                <tr><td><img src="images/tebow.jpg" alt="Tim Tebow"></img></td></tr> 
            </table>
            </a>
        </td>
        <td class="subMenu">
            <a href="#" onclick="slideShow(1)">
            <table>
                <tr> <td class="subTitle">Nash attack </td></tr>
                <tr><td><img src="images/nash.jpg" alt="Steve Nash"></img></td></tr>
            </table>
            </a>
        </td>
        <td class="subMenu">
            <a href="#" onclick="slideShow(2)">
            <table>
                <tr> <td class="subTitle">Kobe Who? </td></tr>
                <tr><td><img src="images/kobe.jpg" alt="Kobe Bryant"></img></td></tr>
            </table>
            </a>
        </td>
        <td class="subMenu">
            <a href="#" onclick="slideShow(3)">
            <table>
                <tr> <td class="subTitle">Not So Giant </td></tr>
                <tr><td><img src="images/giants.jpg" alt="San Francisco Giants"></img></td></tr>
            </table>
            </a>
        </td>
        <td class="subMenu">
            <a href="#" onclick="slideShow(4)">
            <table>
                <tr> <td class="subTitle">Expensive mistake </td></tr>
                <tr><td><img src="images/tbrown.jpg" alt="Terrell Brown"></img></td></tr>
            </table>
            </a>
        </td>
    </tr>
</table>                 

</div>
</body>
</html>
4

0 回答 0