gpt4 book ai didi

jquery - slider 显示特定值的元素

转载 作者:太空宇宙 更新时间:2023-11-03 20:01:30 27 4
gpt4 key购买 nike

我想要一个类似于 this 的 jQuery/任何 slider 一个,但功能不多。

我的 HTML 代码中会有一些元素,图像、文本,也许还有一些 div,它们应该默认隐藏,但是当 slider 达到特定值时,图像/文本/任何东西应该依次显示。

因此,例如,在值为 0 时,只显示一张图片,然后在值为 1 时弹出另一张图片,依此类推。

是否有任何预制的 jQuery 插件,或者我该如何去做?

<!DOCTYPE html>
<html>

<head>
<title>jQuery Mobile Tutorial on Codeforest.net</title>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css">
<style>
#slider {
margin: 10px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script>
var img1 = $('<img\>').attr('src', 'http://lorempixel.com/400/200/');
var img2 = $('<img\>').attr('src', 'http://lorempixel.com/300/200/');
var foto = $('#foto');

foto.html(img1);

$("#slider").slider({
slide: function(event, ui) {
if (ui.value > 50) {
$('#foto').html(img2);
} else {
$('#foto').html(img1);
}
}
});
</script>
</head>

<body>
<div id="slider"></div>
<div id="foto"></div>
</body>

</html>

最佳答案

jQueryUI slider 有一个内置函数,可以在您滑动时获取值。这样您就可以随时获取 slider 的值。

$("#slider").slider({
slide: function(event, ui) {
console.log(ui.value);
}
});

在特定点附加特定图像应该不难。你也可以取消隐藏你的 div,或者任何你想要的。我已经在 J​​SFiddle 上为您构建了一个示例。

http://jsfiddle.net/AVBWr/

编辑:确保将它包装在 document.ready 函数中,如下所示:

$(document).ready(function() {
var img1 = $('<img\>').attr('src', 'http://lorempixel.com/400/200/');
var img2 = $('<img\>').attr('src', 'http://lorempixel.com/300/200/');
var foto = $('#foto');

foto.html(img1);

$("#slider").slider({
slide: function(event, ui) {
if (ui.value > 50) {
$('#foto').html(img2);
} else {
$('#foto').html(img1);
}
}
});
});

关于jquery - slider 显示特定值的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14455883/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com