jQuery UI：當滑塊位置發生變化時的動作

我使用的這個jQuery UI滑塊從http://jqueryui.com/slider/#steps 這是一個簡單的滑塊，具有3個步驟（1,2和3）和一個顯示圖片的div元素（「id_1」）。所以我現在真正想要的是圖片的變化取決於滑塊的位置。所以在位置「1」時，它顯示一張圖片，並且只要我將滑塊移動到位置2或3，該圖片就會改變。我該怎麼做？jQuery UI：當滑塊位置發生變化時的動作

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>jQuery UI Slider - Snap to increments</title> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
<link rel="stylesheet" href="/resources/demos/style.css" /> 
<script> 
    $(function() { 
     $("#slider").slider({ 
      value: 100, 
      min: 1, 
      max: 3, 
      step: 1, 
      slide: function (event, ui) { 
       $("#amount").val("$" + ui.value); 
      } 
     }); 
     $("#amount").val("$" + $("#slider").slider("value")); 
    }); 
</script> 
</head> 
<body> 
<p> 
<label for="amount">Donation amount ($50 increments):</label> 
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" /> 
</p> 

<div id="slider"></div> 
<div id="id_1" class="class_1"></div> 

</body> 
</html>

在此先感謝！

來源

2013-04-04 Oinobareion

您只需要查看滑塊的值，然後顯示相應的圖像。嘗試是這樣的：

slide: function (event, ui) { 
      if (ui.value == 1) { 
       $("#id_1")).attr("src", "image1.png"); 
      } else if (ui.value == 2) { 
       $("#id_1")).attr("src", "image2.png"); 
      } else if (ui.value == 3) { 
       $("#id_1")).attr("src", "image3.png"); 
      } 
     }

，使ID_1的div img標籤來代替：

<img id="id_1" class="class_1"></div>

來源

2013-04-04 10:37:59 SteveP

謝謝！ ui.value的東西正是我所需要的。完美的作品！ – Oinobareion 2013-04-04 12:29:48

你的意思是這樣this（這是一個小提琴）。

我創建了擁有你需要這樣的

var images = [ 
"http://cvcl.mit.edu/hybrid/cat2.jpg", 
"http://www.helpinghomelesscats.com/images/cat1.jpg", 
"http://oddanimals.com/images/lime-cat.jpg" 
]; // replace these links with the ones pointing to your images

然後將圖像的陣列中，當滑塊移動

slide: function (event, ui) { 
      $("#amount").val("$" + ui.value); 
      $("#id_1").html("<img src=\"" + images[ui.value-1] + "\" />"); // subtracting 1 as the arrays first index is 0 
     }

並通過在頁面加載數組的第一個圖像定稿負載

$("#id_1").html("<img src=\"" + images[0] + "\" />"); // Load the first image on page load

來源

2013-04-04 10:44:18 Pankucins

只能在幻燈片事件中執行此操作。

 <script> 
     $(function() { 
      $("#slider").slider({ 
       value: 100, 
       min: 1, 
       max: 3, 
       step: 1, 
       slide: function (event, ui) { 
        $("#amount").val("$" + ui.value); 
if(ui.value == 1) 
{ 
    $('#imgSource').attr('src','1.png'); 
} 
else if(ui.value == 2) 
    { 
     $('#imgSource').attr('src','2.png'); 
    } 

       } 
      }); 
      $("#amount").val("$" + $("#slider").slider("value")); 
     }); 
    </script>

來源

2013-04-04 10:46:06 vijay

只需在Div中添加一個帶有id imgSource的img即可。 – vijay 2013-04-04 10:47:15

jQuery UI：當滑塊位置發生變化時的動作

回答

相關問題