1

背景画像を処理する CSS は次のとおりです。スタイル シートの別の部分で幅と高さを設定しているので、問題はありません。

#mainphoto.bg1 { background-image:url(../images/site/homepg_img_1.jpg); background-repeat:no-repeat;}
#mainphoto.bg2 { background-image:url(../images/site/homepg_img_2.jpg); background-repeat:no-repeat;}
#mainphoto.bg3 { background-image:url(../images/site/homepg_img_3.jpg); background-repeat:no-repeat;}
#mainphoto.bg4 { background-image:url(../images/site/homepg_img_4.jpg); background-repeat:no-repeat;}
#mainphoto.bg5 { background-image:url(../images/site/homepg_img_5.jpg); background-repeat:no-repeat;}
#mainphoto.bg6 { background-image:url(../images/site/homepg_img_6.jpg); background-repeat:no-repeat;}

私のHTMLはかなり基本的です：

 <div id="mainphoto">
       <div id="img-controls"></div>
 </div>

そして最後にjquery：

// create slidearray
 var slideArray = ["bg1", "bg2", "bg3", "bg4", "bg5", "bg6"];

        // add first image to the mainphoto panel 
        $('#mainphoto').addClass(slideArray[0]);

        // add the image navigation
        $('#img-controls').append('<ul id="mybg"></ul>');

        // get the slidelength
        var slideLength = slideArray.length;

        // create the loop and stuff
        for(i=0; i < slideLength; i++) {
            var slideText = i + 1;
            $('#mybg').append('<li class="bg'+slideText+'"><a href="#" rel="bg'+slideText+'"><img src="images/site/img-bullets.png" border="0" ></a></li>');
        }

        $('#mybg li a').bind('click', function(){
            var numSlide = $(this).attr('rel');
            var img2rem = $('#mainphoto').attr('class');

            $('#mainphoto').fadeOut('normal', function(){
                $('#mainphoto').addClass(numSlide).fadeIn('slow', function() {
                    $('#mainphoto').removeClass(img2rem);                           
                });
            });

            $('#mybg li a').removeClass('active');
            $(this).addClass('active');

            console.log("numslide: " +numSlide);
            console.log("img2rem: " +img2rem);

        });

だから私がやりたいのは、私が作ったcssクラス間のクロスフェード効果です。しかし、基本的には、最初の画像がフェードアウトしてから新しい画像がフェードインします。しかし、これらのアニメーションを同時に発生させて、クロスフェード効果を作成したいと考えています。

次にやりたいことは、それらを自動再生して、ユーザーが次の画像をロードするために箇条書きをクリックする必要がないようにすることです。その方法がよくわかりません。

私が見たほとんどのjqueryスライダーは画像のタグを使用していますが、ページでナビゲーションやその他のことが行われているため、タグの使用が複雑になるため、画像を背景画像として使用する必要があります。現在、このクロスフェード効果を発生させる方法に少し混乱しています。ご協力をお願いいたします。

4

1 に答える 1

0

Nivoslider http://nivo.dev7studios.com/を使用できます。多くのクールなトランジションと自動再生機能を備えた jQuery プラグインを無料で使用できます。また、コーディングの時間を節約できます..

于 2012-05-06T11:39:45.150 に答える