Question

我正在组建一个Loch Ness Monster网站我有两张Nessie的照片，我一直试图从左右两侧随机滑动到屏幕上而不必被用户提示。
详细说明，图像应该是：

从左侧滑动屏幕，然后滑下，然后
从右侧滑动，然后滑下。

随机间隔。

我意识到我需要使用.animate函数，math.random，可能还有.toggle，但我是JavaScript和jQuery的新手，并且不知道如何分割代码在一起。

如果有人能帮助我，我会非常感激！

$(function() {

});

function animateNessie() {
    var randomTime = // use Math.random to update randomTime var for its next use
        setTimeout(function() { // animate Nessie graphic (see jQuery.animate)
            $().animate({
                left: '50px'
            });
            //hide Nessie graphic
            //call function again
            animateNessie();
        }, randomTime);
}

（我班上的某个人试图整理一个松散的轮廓，但他们也不是很确定我不想使用bootstrap因为必须经历下载过程，所以加上我还不是很好）

Answer 1

你想到的是旋转木马。为此我更容易使用Bootstrap，但我知道一个自然的jQuery解决方案。我认为这可能会有所帮助。

您希望使用setInterval，但为此传递随机值。比如说，您希望间隔随机在1到10秒之间。

var randomTime = Math.floor(Math.random() * 9000) + 1000;

这将选择1000到10000之间的随机数，它将被传递到setInterval的第二个参数。这可以衡量代码运行所需的毫秒数。

然后您需要获取图像。假设您只有两个图像，则可以使用此代码。

var image1 = $("img:eq(0)");            // Selects your first image
var image2 = $("img:eq(1)");            // Selects your second image

使用hide()方法隐藏第二张图片。

image2.hide();

要连续运行某个功能，我们使用setInterval。由于我们想要替代，我们只需调用toggle()方法来检查图像是否隐藏。

setInterval(function() {
    $("img").toggle();
}, randomTime);

这是一个小提琴

http://jsfiddle.net/sx3fnpuy/1/

如何在没有.click的情况下随机地切换图像

1 个答案: