0

所以我现在在我的网站上有一张图片幻灯片，我正在尝试在图片更改时添加一个过渡，但我没有成功。我已经附上了幻灯片的 html（缩短）、javascript 和 CSS 代码（我试图通过转换影响的图像是 id="slideshowImg"），如果有人看到我做错了什么，我真的很感激一些指导。谢谢！

HTML 代码 （本质上是一个表格，顶行是更改的图像，底行包含不同文章的多个图像，我不想添加过渡）

<body onload="imageChange()">
<div id="imageDiv">
<table id="mediaMenu">
    <tr>
        <td id="imageRow" colspan="3" >
            <img id="slideshowImg"  src="images/tebow.jpg" frameborder="0" scrolling="no" ></img>
        </td>
        <td id="detailPar" colspan="2">
            <a id="introText">Tim Tebow talks about Aaron Hernandez</a>
            <p id="detailsPar">tebowtebowtebow</p>
        </td>

    </tr>
    <tr>
        <td class="subMenu">
            <a href="#" onclick="doEverything(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="doEverything(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="doEverything(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>
</tr>
</table>                 
</div>
</body>
</html>

JAVASCRIPT 代码*

slideshowImages = new Array(5);
slideshowImages[0] = new Image();
slideshowImages[0].src = 'images/tebow.jpg';
//rest of image array in same way

function slideShow(source)
{
document.getElementById('slideshowImg').src = slideshowImages[source].src;
clearInterval(newPic);
index=source;
imageChange();
}
function slideshowForward() 
{
index++;    
if(index >= 5) 
{
    index=0;
}
// set the image name to the slide show image
document.getElementById('slideshowImg').src = slideshowImages[index].src;
document.getElementById('introText').innerHTML = introText[index];
document.getElementById('detailsPar').innerHTML = introDetails[index];

}
function imageChange() {
newPic=setInterval(function(){slideshowForward() },5000);
}
function doEverything(textPar) {
 getText(textPar); //code not included, but this doesn't affect the image
 slideShow(textPar);
}
</script>

我试图影响的图像的 CSS

#slideshowImg {
width:100%;
height:300px;
margin:0px;
border-spacing:20px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
4

0 回答 0