0

サイクルする必要のある一連の写真（実際には3つのシリーズ）があります。これは、jQueryサイクルプラグインがうまく機能します。

私の問題は、ページの読み込み時にさまざまな方向にそれぞれ数度回転させて（順番に回転させて）、「散らばった」外観を実現したいということです。jQuery Rotateもこれをうまく実行します...私の問題は、同じページで回転と循環の両方を発生させることができないことです。

解決策はサイクルコード自体の中で画像を回転させることを含むように見えますが、それは私の限られた能力を超えています（少なくとも利用可能な時間では）。他の誰かがこれを試しましたか？ポインタがありますか？

他のすべてが失敗した場合、フォトショップで画像を事前に回転させることはできますが、それは理想的ではありません。js回転は、サイトの所有者が新しい写真をディレクトリにダンプするだけで写真を簡単に更新できることを意味します。Photoshop otohは、それぞれを回転させ、jpgから透明度をサポートする形式に変換することを意味します（さらに悪いことに、適切な背景色などを適切な場所に複製します）。

私は標準のjquery.cycleを使用しています...htmlは次のように最初の3つの画像をプリロードします：

<div id="slideshow" class="pics">  
    <img class="rotate" src="images/image1.jpg" width="100" height="100" />  
    <img class="rotate" src="images/image2.jpg" width="100" height="100" />  
    <img class="rotate" src="images/image3.jpg" width="100" height="100" />  
</div>

そして、私はサイクルを開始する通常のjsを持っています：

$(document).ready(function() {       

   var stack = [];  

   var imagesPath = '../images/image';  
   if(window.location.href.indexOf('\/html\/') == -1)  
      imagesPath = 'images/image';  

      for (var i = 0; i < 8; i++) {  
      var img = new Image(100,100);  
      img.src = imagesPath + i + '.jpg';  
      $(img).bind('load', function() {  
          stack.push(this);  
      });  
   }  

   // start slideshow  
   $('#slideshow').cycle({  
      timeout:  600,  
      before:   onBefore ,  
      speed: 2000  
   });  

   // add images to slideshow  
   function onBefore(curr, next, opts) {  
     if (opts.addSlide) // <-- important!  
          while(stack.length)  
         opts.addSlide(stack.pop());  
   };  
});

jQuery.rotateを使用してこれらの画像の最初の画像を回転させるjsは次のとおりです。

$('.rotate')[0].rotateLeft(5);

上記はサイクリングを無効にすると機能しますが、サイクリングがオンの場合は何も起こりません。次のように配列参照を削除すると、表示されている画像が回転し、スライドショーから削除されてページに残ります。

$('.rotate').rotateLeft(5);

おそらく、代わりに含まれているdivを回転させるのが理想的ですが、jquery.rotateはcanvasを使用するため、画像に対してのみ機能します。私が提供できる情報が他にあるかどうか教えてください。そして、あなたの興味に感謝します！

4

2 に答える 2

1

JQuery Cycle は、コンテナーの直接の子イメージをスライドに変換するために、多数の CSS をコンテナーの直接の子イメージに追加します。スライドに画像を分散させたい場合は、各スライドの内容をタグで囲む必要があります。次に、オプションを使用して、それらの要素が実際にはスライドであることを JQuery サイクルに伝えslideExprます。

HTML

<div id="slideshow">
    <div class="slide">
        <img src="1.png" />
        <img src="2.png" />
        <img src="3.png" />
    </div>

    <div class="slide">
        <img src="1.png" />
        <img src="2.png" />
        <img src="3.png" />
    </div>
</div>

Javascript

$('#slideshow').cycle({  
    slideExpr: '.slide',
    timeout:  600
});

これにより、Jquery サイクルがそのスタイルをラッパーに適用し、JQuery 回転が互いのつま先を踏むことなく各スライド内のコンテンツに回転を適用できるようになります。

JQuery サイクル オプションの完全なリストは次のとおりです。

于 2011-12-30T11:31:51.383 に答える
0

CSS3 変換セレクターを使用してみてください。

 -webkit-transform: rotate(-15deg);

$('.rotate').css({'-webkit-transform' : 'rotate(-5deg)' });
于 2010-07-22T20:35:00.640 に答える