Question

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

HTML CODE （本质上是一个表，顶行是更改的图像，底行是包含不同文章的多个图像，我不打算添加过渡到）

<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 CODE *

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

CSS的问题从一个图像转换到另一个图像

0 个答案: