Question

如何使用javascript左/右滑动图像？我希望图像慢慢向右滑动。你是否使用javascript的setTimeout函数逐渐改变元素样式的“左”值？也许jQuery有这个功能？

Answer 1

jQuery有一个名为animate的内置方法。

使用它的一个例子：

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

更多：http://api.jquery.com/animate/

Answer 2

jQuery肯定会：）

内置.animate（）函数：http://api.jquery.com/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 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";  
}

向左或向右滑动图像

4 个答案: