0

現在、自分のサイトに画像のスライドショーがあり、画像が変更されたときにトランジションを追加しようとしていますが、成功していません。スライドショー用の html(shortened)、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