画像を左右にスライド

Question

javascriptを使用して画像を左右にスライドさせるにはどうすればよいですか？イメージをゆっくりと右にスライドさせたい。要素スタイルの「左」値を徐々に変更するには、javascriptのsetTimeout関数を使用しますか？おそらくjQueryにはその機能がありますか？

Answer 1

jQueryがわからない:)

.animateに建て（）関数があります：

コード例では、 （jQueryからわずかに変更されています）は以下の通りです。私は動作していますjsFiddle：http://jsfiddle.net/Damien_at_SF/HRBkN/

CSS：

img.block { 
    position:absolute; 
    left:50px; 
    top:50px; 
    margin:5px; 
} 

HTML：絶対配置IMGため

<button id="left">left</button> <button id="right">right</button> 
<img src="http://jsfiddle.net/img/logo.png" class="block" /> 

JS：静的/相対位置決めIMGため

$("#right").click(function(){ 
    $(".block").animate({"left": "+=50px"}, "slow"); 
}); 

$("#left").click(function(){ 
    $(".block").animate({"left": "-=50px"}, "slow"); 
}); 

JS：

$("#right").click(function(){ 
    $(".block").animate({"margin-left": "+=50px"}, "slow"); 
}); 

$("#left").click(function(){ 
    $(".block").animate({"margin-left": "-=50px"}, "slow"); 
}); 

希望はそれを助ける:)

Answer 2

jQueryには、animateというビルトインメソッドがあります。

それを使用する例：

$('#id').animate({ 
    left: 200 
}); 

もっと：

Answer 3

私はこれがfiddle なしでそれを持っています。私は.animate()を使用していないが、私はこの記事を読んだ後でそれをチェックするつもりだ。

Answer 4

私は次のように左右のサイド画像をスライドすることができます。

function showDivs(n) { 
    var i; 
    var x = document.getElementsByClassName("mySlides"); 

    if (n > x.length) 
    { 
     slideIndex = 1 
    } 

    if (n < 1) 
    { 
     slideIndex = x.length 
    } 

    for (i = 0; i < x.length; i++) 
    { 
     x[i].style.display = "none"; 
    } 

    x[slideIndex-1].style.display = "block"; 
}