che*_*run 0 html css jquery slider jquery-mobile
我希望有一个类似于这个的jQuery /任何滑块,但功能更多.
我将在我的HTML代码,图像,文本和可能的一些div中使用元素,默认情况下应该隐藏这些元素,但是当滑块达到特定值时,图像/文本/应该连续显示.
因此,在值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({
slide: function(event, ui) {
console.log(ui.value);
}
});
在特定点附加特定图像应该不难.你也可以取消隐藏你的div,或任何你想要的东西.我在JSFiddle上为你构建了一个例子.
编辑:确保将其包装在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);
}
}
});
});