1

Web ページの画像ヘッダーを変更する簡単な jQuery 関数を作成しようとしています。

HTML は次のようになります。

<div class="slider"> 
<ul>
<li> <img src="img/slide21.png" alt=""> </li>
<li> <img src="img/slide31.png" alt=""> </li>

5秒ごとに次の画像をフェードインし、古い画像をフェードアウトしたいだけです。画像の位置は変わらず、すべての画像は同じサイズです。

私のjsコードは次のようになります：

function menu (obj) {
if (!obj.length) {
  return;
}
  $(obj).find("li").hide();
  $(obj).find("li").next().fadeIn(2400);
}
 $(document).ready(function () {
   menu(".slider");
 });
}

このコードは本当に私が望むものではありませんが、現在、これを行う方法がわかりません。

どんな助けでも大歓迎です！ありがとう！

4

3 に答える 3

1

すでに jQuery を使用しているため、サイクル プラグインhttp://jquery.malsup.com/cycle/をご覧ください。

于 2012-07-06T15:45:24.910 に答える
0

settimeoutを使用できます。

function change_image(obj) {
    $(obj).find("li").fadeOut();
    $(obj).find("li").next().fadeIn();
}

var menu_obj;
function menu(obj) {
   ...
   menu_obj = obj
   setTimeout("change_image(menu_obj);", 5000);

}

フェードアウトとフェードインのデフォルトは500だと思います。これは、実際のフェードアニメーションでは0.5秒です。

また、おそらく次のようなこともできます。

$(obj).find("li:first-child").delay(5000).fadeOut().next().find("li").fadeIn();

遅延関数がjQueryのアニメーションキューを遅延させる場所。

ただし、セレクターfind（ "li"）は、すべてのLI要素を見つけてそれらをすべてフェードアウトし、次にそれらの兄弟を見つけてフェードインしようとするため、li：first-childまたはli：nth-​​のようなものが必要になります。 child（x）および実行カウントを維持します。nth-childの問題は、CSSがIEでサポートされているかどうかわからないことです...しかし、jQueryセレクターは引き続き機能すると思います。

とにかく、それで遊ぶ必要があります。おそらく、現在の画像を追跡するグローバル変数を保持し、その上でnext（）を呼び出します（開始する必要があるリストの最後のチェックを入れるように注意してください）最初の子で終わります）。LIの数の長さを使用してこれを確認するか、obj> li：last-child要素へのポインターを保持してテストすることができます。

または、先に進んで、提案されているようにイメージサイクルプラグインを使用します。

個人的にサイクリング画像を作成するときは、すべての画像を保持するのに十分な幅のdivを作成し、1つの画像だけをコンテナとして保持するのに十分な幅のdivを作成し、オーバーフローをクリップするように設定し、jquery関数を使用します。位置またはマージンをM秒ごとにN*image_widthの係数で変更します。ここで、Nは画像の数です。

これは別の方法で行われた例です。

http://www.htmlgoodies.com/beyond/javascript/article.php/3881826/JavaScript-Tutorial-Adding-Rotating-Images-to-Your-Web-Site.htm

それは少なくともあなたにについてのアイデアを与えるかもしれませんsetTimeout

于 2012-07-06T16:13:33.093 に答える
0

数か月前に、非常にうまく機能する簡単な画像遷移スクリプトを作成しました。単に画像を交換するのではなく、スクリプトは最初に含まれる div の背景を最初の画像に設定します。このようにして、最初の画像が非表示になったときに、2 番目の画像がフェード インする間、ちらつきはありません。AdairHomes.comで遷移を表示できます。これは大きな画像の回転です。

HTML ラッパー

  <div id="galleryContent" style="background:url(images/simple-banner-image-bath.jpg) top left;">
    <img id="bannerImage" src="<!--Place the first image source here-->" alt="<!--Place your first ALT tag here-->" width="960" height="562" />
  </div>

jQuery

<script type="text/javascript">
    var banners = new Array();
    // Array of images which you want to cycle
    banners = [{"Source":"images/simple-banner-image-construction2.jpg","Alt":"Construction - Framing"},
               {"Source":"images/simple-banner-image-bath.jpg","Alt":"Signature Custom Bathroom"},
               {"Source":"images/simple-banner-image-2659.jpg","Alt":"Model Signature 2659"},
               {"Source":"images/simple-banner-image-kitchen.jpg","Alt":"Signature Custom Kitchen"},
               {"Source":"images/simple-banner-image-2432.jpg","Alt":"Model Signature 2432"},
               {"Source":"images/simple-banner-image-1405.jpg","Alt":"Model Signature 1405"},
               {"Source":"images/simple-banner-image-2830.jpg","Alt":"Model Signature 2830"}];

    var count = banners.length - 1; // subtracting 1 accounts for the array starting at [0]
    var counting = 0;
    going = setInterval(function(){

      $("#bannerImage").fadeOut(200,function(){
        $(this).attr({'src':banners[counting]['Source'],'alt':banners[counting]['Alt']}).fadeIn(200);
      });

      // Select Next Picture
      if(counting != count){counting++;}else{counting = 0;}

      // Set new background image
      $("#galleryContent").css({'background':'url('+banners[counting]['Source']+') top left'});
    },6000);

    var loadCount = 1;

    // Preload images after the first image is displayed
    slowLoad = setInterval(function(){
      if(loadCount < banners.length){
        $("body").append('<img src="'+banners[loadCount]['Source']+'" style="display:none;" />');
        loadCount++;
      }else{
        clearInterval(slowLoad);
      }
    },500);    

</script>

配列内で回転させているすべての画像を保持することを選択したことに気付くでしょう。これは、含まれているすべてのイメージを PHP で管理しているためです。

このコードでは、基本的には#galleryContentdiv をスタイルして希望どおりに表示し、すべての画像を alt タグとともにバナー配列に追加するだけで済みます。また、最初に表示したいヘッダーを に配置する必要があります#bannerImage。

さらにコードや支援が必要な場合はお知らせください。上記のリンクから、かなり良い感じを得ることができると思います。

于 2012-07-06T16:37:19.157 に答える