제이쿼리 질문드립니다 ^^;
본문
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<div id="range"> <img src="/theme/basic/img/1.jpg" id="currentVal"/></div>
<script>
(function() {
$("#range").slider({
range: "min",
max: 12,
value: 1,
slide: function(e, ui) {
/*
$("#currentVal").html(ui.value)
*/
$("#currentVal").attr("src",ui.value);
}
});
}).call(this);
</script>
스크롤을 움직이면
#currentVal 이미지 경로가 /theme/basic/img/(제이쿼리 value 1~10).jpg
으로 변경하고 싶은데 혹시 이렇게 변경이 가능할까요? ^^;
답변 1
검색 + 삽질하다가 적용했습니다 ㅎㅎ;
<script>
(function() {
var urltext = "/theme/basic/img/";
$("#range").slider({
range: "min",
max: 12,
value: 1,
slide: function(e, ui) {
/*
$("#currentVal").html(ui.value)
*/
$("#currentVal").attr("src",
function(){
return "/theme/basic/img/" + ui.value + ".jpg";
});
}
});
}).call(this);
</script>
답변을 작성하시기 전에 로그인 해주세요.