これに似たjQuery/anyスライダーが必要ですが、機能はほとんどありません。
HTMLコード、画像、テキスト、およびおそらくいくつかのdivに要素があり、これらはデフォルトで非表示になっていますが、スライダーが特定の値に達すると、画像/テキスト/その他が連続して表示されます.
たとえば、値 0 では 1 つの画像のみが表示され、値 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>