向左或向右滑動圖像

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：

<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相對的/靜態的定位IMG：

$("#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()。我沒有使用.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"; 
}