0

私は写真家で、最近、ウェブサイトの再設計に取り組んでいます。非常に便利な Web サイトで見つけたスライドショー コードを利用し、自動再生、次へのカスタマイズ、前へのボタンなどを削除することで、必要に応じてカスタマイズすることができました。今。

しかし、1 つ質問があります。コードを完全に書き直さずに、画像遷移にフェード効果を追加することはできますか? ここ数日、javascript/jquery コードを探していて、コードを提供しているサイトをたくさん見つけましたが、既存のギャラリーに実装できるサイトが見つかりませんでした。私のコードは次のようになります。

<body>

<!-- configurable script -->
<script type="text/javascript">
theimage = new Array();


// The dimensions of ALL the images should be the same or some of them may look stretched or reduced in Netscape 4.
// Format: theimage[...]=[image URL, link URL, name/description]
theimage[0]=["/images/portrait/image1.jpg", "", "Image Title 1"];
theimage[1]=["/images/portrait/image2.jpg", "", "Image Title 2"];
theimage[2]=["/images/portrait/image3.jpg", "", "Image Title 3"];
theimage[3]=["/images/portrait/image4.jpg", "", "Image Title 4"];
theimage[4]=["/images/portrait/image5.jpg", "", "Image Title 5"];
theimage[5]=["/images/portrait/image6.jpg", "", "Image Title 6"];
theimage[6]=["/images/portrait/image7.jpg", "", "Image Title 7"];
theimage[7]=["/images/portrait/image8.jpg", "", "Image Title 8"];

///// Plugin variables

playspeed=0;// The playspeed determines the delay for the "Play" button in ms
//#####
//key that holds where in the array currently are
i=0;


//###########################################
window.onload=function(){

    //preload images into browser
    preloadSlide();

    //set the first slide
    SetSlide(0);

}

//###########################################
function SetSlide(num) {
    //too big
    i=num%theimage.length;
    //too small
    if(i<0)i=theimage.length-1;

    //switch the image
    document.images.imgslide.src=theimage[i][0];

    //if they want name of current slide
    document.getElementById('slidebox').innerHTML=theimage[i][2];

    //if they want current slide number and total
    document.getElementById('slidecount').innerHTML= ""+(i+1)+" / "+theimage.length;

}

//###########################################
function preloadSlide() {
    for(k=0;k<theimage.length;k++) {
        theimage[k][0]=new Image().src=theimage[k][0];
    }
}

</script>


<!-- slide show HTML -->
<form name="slideshow">

<table border="0" cellpadding="2" cellspacing="0">
<tr>
    <td align="left">
    <script type="text/javascript">
        document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
    </script>
    </td>
</tr>
<tr>
    <td align="left"><div id="slidebox"></div></td>
</tr>
<tr>
    <td height="30px" align="left" valign="bottom">
        <a style="text-decoration:none;" href="javascript:SetSlide(i-1);" onfocus="this.blur()">Prev</a> | 
        <a style="text-decoration:none;" margin-left:2px"; href="javascript:SetSlide(i+1);" onfocus="this.blur()">Next</a>
        <div style="display:inline; margin-left:10px" align="left" id="slidecount"></div>
    </td>
</tr>
</table>

</form>
<!-- end of slide show HTML -->

</body>

ありがとうございました！

4

1 に答える 1

1

a を実装してから、次のようにjQuery を使用してSetSlide()a を実装するように変更できます。fadeOutfadeIn

//###########################################
function SetSlide(num, titleOnly) {
    if (!titleOnly) {
        //switch the image
        var img = $("#imgslide");

        // don't interrupt an image in transition
        if (img.data("inTransition")) {
            return;
        }
        img.data("inTransition", true);


        //too big
        i=num%theimage.length;
        //too small
        if(i<0)i=theimage.length-1;

        img.stop(true).animate({opacity: 0}, 1000, function() {
            img.attr("src", theimage[i][0]);
            img.animate({opacity: 1}, 1000, function() {
                img.data("inTransition", false);

            });
        })
    }

    //if they want name of current slide
    document.getElementById('slidebox').innerHTML=theimage[i][2];

    //if they want current slide number and total
    document.getElementById('slidecount').innerHTML= ""+(i+1)+" / "+theimage.length;

}

そしてこれに変更preloadSlide()します：

//###########################################
function preloadSlide() {
    for(k=0;k<theimage.length;k++) {
        theimage[k][3]=new Image().src=theimage[k][0];
    }
}

これが実際のデモです: http://jsfiddle.net/jfriend00/85nzq/

<body>ページに jQuery を含めるには、他のスクリプトの前のタグの直後の右上近くにこれを追加します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
于 2012-06-18T15:01:27.970 に答える