0

数秒ごとに背景画像が変化する写真 Web サイトを作成しようとしています。以下を使用して画像を変更しています。

<script type='text/javascript'>
            var imageID=0;
            function changeimage(every_seconds){
     //change the image
            if(!imageID){
            document.getElementById("myimage").src="John%20Gallacher%20Photography/images/composite/Composite%201.jpg";
            imageID++;
            }
            else{if(imageID==1){
            document.getElementById("myimage").src="John%20Gallacher%20Photography/images/composite/Composite%202.jpg";
            imageID++;
            }
            else{if(imageID==2){
            document.getElementById("myimage").src="John%20Gallacher%20Photography/images/composite/Composite%203.jpg";
            imageID=0;
            }
            }
            }
             //call same function again for x of seconds
            setTimeout("changeimage("+every_seconds+")",((every_seconds)*5000));
            }
        </script>
</head>
<body onload='changeimage(2)'>
    <div>
        <img id="myimage" src="John%20Gallacher%20Photography/images/composite/Composite%201.jpg"/>
    </div>

画像をフェードインしてから再びフェードアウトさせることは可能ですか?もしそうなら、これを行う最も簡単な方法は何ですか. 私は html と css の基本的な理解を持っています。私の JavaScript は非常に基本的なものです。どんな助けでもありがとう

4

4 に答える 4

1

サポートリストとは何ですか？古い IE について心配していない場合は、トランジションに CSS トランジションを使用し、js
http://jsfiddle.net/Bushwazi/MYKFT/で状態を変更できます。

#myimage {
  -webkit-transition:all 1s linear 0s;
  -moz-transition:all 1s linear 0s;
  -o-transition:all 1s linear 0s;
  transition:all 1s linear 0s;
  -webkit-transform: translate3d(0,0,0); /* Fixes trails in Chrome */
}

そして、jsを使用して不透明度を変更し、次に画像、不透明度を変更します...

var imageID = 0,
        ti = document.getElementById("myimage");;
var changeImage = function(t){
    // change the opacity of the image to 0, let the css control the animation
    ti.style.opacity = "0.0";
    ti.style.filter = 'alpha(opacity=00)'; // IE fallback
    // after 1 second (the animation), change the image
    setTimeout(function(){
        //change the image
        switch(imageID){
            case 0:
                ti.src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTM7c8EFwQ_PseqOEblAtm9qXali9kzvBKsmrGDECLYu1HJP3EO";
            break;
            case 1:
                ti.src="https://si0.twimg.com/profile_images/2317326635/3kglmsqti3msjlb1nr60.png";
            break;
            case 2:
                // return to the original image
                ti.src="http://upload.wikimedia.org/wikipedia/en/c/cc/FPO_mark3.jpg";
            break;
            default:
                // do nothing
        }
        if(imageID == 2){
            imageID = 0;
        } else {
            imageID++;
        }
        // change the opacity of the image to 0, let the css control the animation
        ti.style.opacity = "1.0";
        ti.style.filter = 'alpha(opacity=100)'; // IE fallback  
    },1000);
} // close changeimage
//call same function again for x of seconds
window.setInterval(changeImage, 5000);
于 2013-06-18T20:05:45.787 に答える
0

プラグインは、小さなコードでできることのオーバーヘッドが大きいと思います。

簡単な例を用意しました: http://jsfiddle.net/Pevara/XcBTx/1/

いくつかの注意点:
- 私は背景画像を使用することにしました。背景はあなたが求めているものであり、画像が印刷物に表示されることを望まないからです。写真 Web サイトの場合、背景画像は実際のコンテンツであると主張できますが、代わりに画像を処理するようにコードを変更するのは簡単なはずです。
- 画像に 2 つの div を使用しているため、1 つをフェードイン、もう 1 つをフェードアウトできることに注意してください。おそらく、不要なマークアップを避けるために、JavaScript で 2 番目のものを追加する方がよいでしょう。私が保持する最初の div は、javascript を使用しないユーザーに少なくとも 1 枚の写真を表示する必要があるためです。本体にセットすることも考えられますが、お任せします。- 画像をプリロードして、スライドショーを開始する前にロードされるのを待つ必要があるでしょう。そこにたくさんの情報があります。

$(window).loadそしてJavaScript（ハンドラーに入れる）：

// the list of background images
var myImages = ['http://placekitten.com/900/400','http://placekitten.com/550/600'];
// the transition speed
var fadeSpeed = 500;
// the time between transitions
var playSpeed = 2000;

function fadeToNextImage() {
    // -- prepare some vars
    // the image wrappers
    var $bg1 = $('#bg1');
    var $bg2 = $('#bg2');
    // the index of the next image in our array
    var nextNr = parseInt($bg1.data('number')) + 1;
    // if the index is larger then the number of images,
    // we want the first image
    if (nextNr > myImages.length - 1) { nextNr = 0; }
    // the path to the next image
    var nextImg = 'url(' + myImages[nextNr] + ')';

    // set the image as background on bg2
    $bg2.css('background-image', nextImg);
    // fade out bg1
    $bg1.fadeOut(fadeSpeed);
    // fade in bg2
    $bg2.fadeIn(fadeSpeed, function() {
        // when the cross fade is ready
        // set the image as background on bg1
        $bg1.css('background-image', nextImg);
        // update the number attribute
        $bg1.data('number', nextNr);
        // show bg1 (which now contains the same image as bg2)
        $bg1.show();
        // hide bg2 (to prepare it for the next slide)
        $bg2.hide();
    });
}

// start the slideshow
var interval = window.setInterval(function() {fadeToNextImage();}, playSpeed + fadeSpeed);

コメントもたくさん書いてますが、お気軽にどうぞ！

于 2013-06-18T20:37:29.183 に答える
0

jQueryを使用できます。これには、 と を含む多くのトランジションがfadeIn()ありfadeOut()ます。

これらの関数を次のように画像に適用します。

$("#image_id").fadeIn(); $("#image_id").fadeOut();

しかし、まず頭の中に jQuery を含める必要があります。次のようにできます。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

はHTML マークアップ#image_idのid=です。<img>

于 2013-06-18T19:12:03.230 に答える
0

そのためには、 jQuery Cycleなどの単純なプラグインを使用できます。コードは次のようになります。

<head>
...
    <script src="js/jquery-1.10.1.min.js"></script>
    <script src="js/jquery.cycle.lite.js"></script>
...
</head>
...
    <div class="fader">
         <img src="image1.jpg" width="100px" height="100px">
         <img src="image2.jpg" width="100px" height="100px">
         <img src="image3.jpg" width="100px" height="100px">
    </div>
...
    <script>
        $('.fader').cycle();
    </script>
</body>

「/js」をそのファイル（ダウンロードする必要がある）へのパスに置き換える必要がある場所。

于 2013-06-18T19:22:00.960 に答える