javascript - 用javascript，Html5中的水平线替换Button

Question

我使用一个输入按钮来隐藏和显示图像 div，并使用 html5、jquery、Css3。但是现在我想用一条水平线替换按钮。每当在线移动点时，就会触发按钮。

现在我有普通按钮，如下图所示:

但我想要一行替换此按钮，如下图所示

我正在使用三个图像 div，点击旋转后显示的是下一个图像 div。

switchVisible() 是一个显示和隐藏图像的函数。
我没有 任何关于这个请给我一些想法。

我正在使用这个按钮代码:

<input id="Button1" type="button" value="Rotate" onclick="switchVisible();"/>

Answer 1

您可以使用 j query.ui slider让您的线路在图像之间切换。

像这样:

$("#imageLine").slider({
    value: 0,
    orientation: "horizontal",
    range: "min",
    animate: true,
    stop: function( event, ui ) {
        //you can detect where ui.slider stops here
        console.log(ui.value)

        //and run your function then
        switchVisible(ui.value);
    }
});

function switchVisible(){
     ...your logic for displaying images depending on ui.slider position
}