4

そのため、クリックするとトランジットでアニメーション化し、フェードアウトし、新しい画像でフェードインするヘッダー画像があります。その後、新しい画像をクリックすると、アニメーションが表示され、空白のスペースにフェードアウトします。順序付けられた一連の画像を連続的にアニメーション化/フェードアウトするにはどうすればよいですか?クリックごとに 1 つの新しい画像が無限に表示されますか?

これが私がこれまでに持っているものです...

$(document).ready(function(){
    $("#headuh").click(function(){
        $("#headimg").transition({ skewY: '30deg' },1000);
        $("#headimg").fadeOut(function() {      
        $(this).transition({ skewY: '00deg' }) .load(function() { $(this).fadeIn(); }); 
        $(this).attr("src", "/imgurl.jpg");
4

2 に答える 2

0

次のスニペットは問題を正確に解決するわけではありませんが、フェードインとフェードアウトを伴う28枚の画像のセットをランダムに循環するため、正しい方向に進む可能性があります。あなたはそれをhttp://moodle.hsbkob.deでライブで見ることができます：

<script src="jquery-1.4.2.min.js" type="text/javascript"></script> 
<script type="text/javascript">
//<![CDATA[
var g_first_call = true;
var g_pic_old;

$(document).ready(function() {      
    pickPic();
    setInterval("pickPic()", 7500);
});

function randomPic() {
    do {
        var pic = parseInt(28*Math.random()+1);
    } while (pic == g_pic_old);  // Don't want same pic twice 

    g_pic_old = pic;

    document.getElementById("_image_").src = "./picfolder/picno" + pic + ".jpg";
}

function pickPic() {
    if (g_first_call) {
        randomPic();
        g_first_call = false;
    }

    $("#_fadee_").fadeIn(750, function() {
        $("#_fadee_").delay(6000).fadeOut(750, randomPic);
    }); 
}
//]]>
</script>
<div id="_fadee_"><img id="_image_" alt="Image" /></div>
于 2012-08-02T19:59:41.687 に答える
0

setInterval();という JavaScript 関数を使用できます。このような：

setInterval(function(){
   //this code will keep on executing on every 2 seconds.
},2000)
于 2012-06-25T10:45:02.137 に答える