画像とテキストを回転する

Question

私のウェブサイトで数秒ごとに回転する対応するテキストブロックで画像を撮りたいです。これらの人のようにhttp://hellofisher.com/

私は画像を回転させるためにJavaScriptを得ることができますが、画像の向きに合わせてテキストのブロックをどこに置くことができるのかわかりません。

Answer 1

私はあなたを紹介しますあなたのサイトで簡単に使用できる簡単な例です。この例では、3つのスライドを使用していますが、必要な数のスライドを持つことができる動的なスライダーではありませんが、スライドの量が異なる場合は1つに編集するのは簡単です。

HTML：スライダーは、ユーザーが見ることができる表示領域です

<div id="slider"> 
    <div id="slider-area"> 
     <div class="slide">content</div> 
     <div class="slide">content</div> 
     <div class="slide">content</div> 
    </div> 
</div> 

、スライダーエリアは、あなたがスライドを入れて、各スライドが異なる画像とテキストを含む領域です。

CSS：あなたが見ることができるように3枚のスライドがあるので

#slider { 
    width: 400px; 
    height: 400px; 
    overflow: hidden; 
    position: relative; 
} 

#slider-area { 
    width: 1200px; 
    height: 400px; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

.slide { 
    width: 400px; 
    float: left; 
} 

、スライダーエリアの幅は、スライダの3倍の大きさです。スライダにはオーバーフローがあります：hidden、スクロールバーが表示されず、スライダ領域をスライダの内側に絶対的に配置できるように相対的な位置です。次にスライダーをスライダーの内側に挿入するだけです。 （jQueryのを使用して）

JS：

$(document).ready(function() { 
    var timer = setInterval(changeSlide, 5000); 
}); 

function changeSlide() { 
    var pos = $('#slider').attr('scrollLeft'); 
    if (pos==800) 
     pos=0 
    else 
     pos=pos+400; 
    $('#slider').animate({scrollLeft: pos}, 600, 'swing'); 
} 

ここでは、あなたは5秒ごとchangeSlide関数を呼び出しますタイマーを設定します。 changeSlide関数は、スライダのスクロールバーの現在位置を取得し、それに応じてアニメーションを作成します。最後のスライドが表示されている場合は、次のスライド（pos = 0）が表示され、最後のスライドが表示されていない場合は、その位置に400が追加され、次のスライドにスクロールします。基本的に、スライドアニメーションはタイマーで隠しスクロールバーを移動するだけです。

うまくいけば助けてください！

Answer 2

画像と関連テキストを含む<div>を回転させるにはjQueryを使用してください。 $.hide()と$.show()とJavascriptの時間関数を使用してください。

Answer 3

jqueryコンテンツローテータまたはコンテンツスライダの場合はgoogleを使用します。

For example

Answer 4

あなたが試みることができる：すでにこのように行わ億既製のプラグインがあります

JAVASCRIPT

var imagelist = ["IMAGE1","IMAGE2","IMAGE3"] 
var textlist = ["TEXT1","TEXT2","TEXT3"]; 
counter=0; 
countmax=3; 
var next = function(){ 
    $('rotating_image').innerHTML="<img src=\"" imagelist[counter%countmax] + "\">"; 
    $('rotating_text').innerHTML=textlist[counter%countmax]; 
    countmax++; 
} 
var rotate = window.setInterval(next, SECONDS * 1000); 

HTML

<span id="rotating_image"></span> 
<span id="rotating_text"></span>