向左或向右滑动图像

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"; 
}