1

jquery スライドショーを使用して背景画像を回転させました。しかし、私の要件は、特定の日に従って背景画像を表示する必要があることです。つまり、このように 1 つの画像を回転させなければならない場合もあれば、3 つ以上の画像を回転させなければならない場合もあります。これについては、毎回スクリプトを変更する必要があります。スクリプトを変更せずに背景画像を動的に回転するにはどうすればよいですか。誰かが解決策を持っている場合は、サンプルスクリプトを提案してください。

var slideshowSpeed = 6000;
var photos = [
    {image1.png},
    {image2.png},
    {image3.png}
];
$(document).ready(function() {
    $("#back").click(function() {
        stopAnimation();
        navigate("back");
    });
    $("#next").click(function() {
        stopAnimation();
        navigate("next");
    });
    var interval;
    $("#control").toggle(function() {
        stopAnimation();
    }, function() {
        $(this).css({"background-image":"url(images/btn_pause.png)"});
        navigate("next");
        interval = setInterval(function() {
            navigate("next");
        }, slideshowSpeed);
    });
    var activeContainer = 1;
    var currentImg = 0;
    var animating = false;
    var navigate = function(direction) {
        if (animating) {
            return;
        }
        if (direction == "next") {
            currentImg++;
            if (currentImg == photos.length + 1) {
                currentImg = 1;
            }
        } else {
            currentImg--;
            if (currentImg == 0) {
                currentImg = photos.length;
            }
        }
        var currentContainer = activeContainer;
        if (activeContainer == 1) {
            activeContainer = 2;
        } else {
            activeContainer = 1;
        }
        showImage(photos[currentImg - 1], currentContainer, activeContainer);
    };
    var currentZindex = -1;
    var showImage = function(photoObject, currentContainer, activeContainer) {
        animating = true;
        currentZindex--;
        $("#headerimg" + activeContainer).css({"background-image":"url(images/" + photoObject.image + ")","display":"block","z-index":currentZindex});
        $("#headertxt").css({"display":"none"});
        $("#firstline").html(photoObject.firstline);
        $("#secondline").attr("href", photoObject.url).html(photoObject.secondline);
        $("#pictureduri").attr("href", photoObject.url).html(photoObject.title);
        $("#headerimg" + currentContainer).fadeOut(function() {
            setTimeout(function() {
                $("#headertxt").css({"display":"block"});
                animating = false;
            }, 500);
        });
    };
    var stopAnimation = function() {
        $("#control").css({"background-image":"url(images/btn_play.png)"});
        clearInterval(interval);
    };
    navigate("next");
    interval = setInterval(function() {
        navigate("next");
    }, slideshowSpeed);
});

私は上記のスクリプトを持っています.そして以下は私のhtmlです

<div id="headerimgs">
    <div id="headerimg1" class="headerimg"></div>
    <div id="headerimg2" class="headerimg"></div>
    <div id="headerimg3" class="headerimg"></div>
</div>
4

2 に答える 2

3

var photos現在の日付に基づいてを返す単純な JavaScript 関数を作成できます。

function getPhotos() {
     var currentDate = new Date(),
         photos;

     if (currentDate === new Date("December 25, 2012")) {
         photos = [{ .... }];
     }
     return photos;
}

コードは次のようになります。

 var photos = getPhotos();
于 2012-04-12T13:19:58.850 に答える
0

あなたが使用することができます

var d = new Date();
var n = d.getDay();

それがどの日かを見つけるために..そして画像の回転にはラファエルライブラリをお勧めします. これはほとんどのブラウザー (Firefox 3.0 以降、Safari 3.0 以降、Chrome 5.0 以降、Opera 9.5 以降、Internet Explorer 6.0 以降) と互換性があり、非常に使いやすいです。

于 2012-04-12T14:11:16.510 に答える