javascript - jqueryまたはjavascriptdivの背景画像の変更

Question

構築したサイトに問題があります。グーグルとスタックオーバーフローを検索しましたが、役立つものが見つかりません。コンテンツ検索エンジン、テキストなどを備えたdivが1つあり、背景画像があります。 divの背景画像を2〜3秒ごと、またはフェード効果で設定したものを変更する方法を教えてください。jqueryまたはjavascriptに慣れていないので、しばらくお待ちください。ありがとうございます。

Answer 1

私の知る限り、マークアップを追加せずに背景画像をフェード効果で変更する方法はありません。コードを提供しなかったので、合成例を作成しました。

マークアップ:

<div class="container">
    <div class="bg">
    </div>
    <div class="content">
        ... 
    </div>
</div>
...

CSS:

/*
    this is your main container 
*/
.container {
    width:300px;
    height:300px;
}

/*
    this one is needed to provide 
    independent background, when it fades
    your content will still be available for seeing
*/
.bg {
    width:300px;
    height:300px;
    background-color:yellow;
    z-index:0;
}

/*
    your content, obviously :)
*/
.content {
    position:relative;
    top:-300px;
    z-index:1;
    padding:5px; /*just for better looking*/
}

そしていくつかのjquery：

//in your case, here must be URLs for images
var arr = ["yellow", "blue", "green", "red"]; 
var i = 0;

var intervalID = setInterval(function() {
    //when bg fades, we don't want to see  
    //transparent background                             
    $('.container').css('background-color', arr[i]); 

    //make transparent, change background, make visible again
    $('.bg').animate({opacity: 0}, 'slow', function() {
        $(this).css({'background-color': arr[i]}).animate({opacity: 1});
    });

    //this can be random
    i++;
    if (i >= arr.length)
        i = 0;
}, 2000); //change 2000 if you want different time between changes


//this one is illustating, how to stop background loop
//with "clearInterval". You might want to use it on :hover or smth like that
setTimeout(function(){
    clearInterval(intervalID);
    }, 20000);

要素の正確なサイズを知る必要があるため、これはあまり柔軟なソリューションではありませんが、背景に異なるサイズの画像を使用するとは思いません。

ps 実例 - http://jsfiddle.net/7xVAu/115/

これが役に立ったことを願っています。

Answer 2

htmlコード

    <div id="banner">

  <img class="img1" height="251" width="650" alt="img1" src="images/banner1.jpg"/>

  <img class="img2" height="251" width="650" alt="img2" src="images/banner2.jpg"/>

</div>

jqueryコード

 jQuery.timer = function (interval, callback)
 {

 var interval = interval || 100;

if (!callback)
    return false;

_timer = function (interval, callback) {
    this.stop = function () {
        clearInterval(self.id);
    };

    this.internalCallback = function () {
        callback(self);
    };

    this.reset = function (val) {
        if (self.id)
            clearInterval(self.id);

        var val = val || 100;
        this.id = setInterval(this.internalCallback, val);
    };

    this.interval = interval;
    this.id = setInterval(this.internalCallback, this.interval);

    var self = this;
};

return new _timer(interval, callback);
};

var current_panel = 2;
var animation_duration = 2500;  
$.timer(6000, function (timer) {  
    switch(current_panel){  
        case 1:  
           $("#banner .img1").fadeIn(800);

           $("#banner .img2").fadeOut(800);
            current_panel = 2; 
        break; 
        case 2: 
            $("#banner .img2").fadeIn(800);

             $("#banner .img1").fadeOut(800);
            current_panel = 1; 
        break; 

        timer.reset(12000);  
     }  
 });  

Answer 3

ここから開始できますJQuery docs。よくわからない場合は、良いJavaScript や JQuery の本を探してみてください。また、codecademyは初心者プログラマーにとって非常に役立ちます。