1
으로 처리하지만, 나는 솔루션은 동작하지 않습니다. 내 이미지가 보이지 않아. 이미지 경로가 정확합니다. 내가 도대체 뭘 잘못하고있는 겁니까?은 내 자신의 이미지 나는이 질문에 요청했습니다 알고
나는이 질문에 대한 솔루션을 읽었습니다 : Jquery slider with two arrowsChanging slider handle image, 및 changing jquery slider images을. 세 번째 솔루션이 가장 좋은 것 같지만 어떻게 작동 시킬지 잘 모르겠습니다. 복사하고 붙여 넣었지만이 작업을 수행 할 수 없습니다. 여기에 전체 코드는 다음과 같습니다 여기
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-
ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">
</script>
<script>
$(window).load(function(){
//Used for slider with two arrows - start
var firstHandleClass = 'first-handle';
var secondHandleClass = 'second-handle';
handle = $('#slider-range A.ui-slider-handle');
handle.removeClass('ui-corner-all');
handle.removeClass('ui-slider-handle');
handle.addClass('handle_');
handle.eq(0).addClass(firstHandleClass);
handle.eq(1).addClass(secondHandleClass);
});
</script>
<script>
$(document).ready(function() {
$("#slider").slider({
range: true,
values: [5,17]
});
});
</script>
<style type="text/css">
#slider { margin: 10px; }
.handle_ {
cursor: default;
position: absolute;
top: -0.3em;
z-index: 2;
}
.first-handle {
background: url("images/lefthandle.gif") no-repeat scroll 0 0 transparent;
border-style: none;
height: 36px;
margin-left: -9px;
position: absolute;
width: 21px;
}
.second-handle {
background: url("images/righthandle.gif") no-repeat scroll 0 0 transparent;
border-style: none;
height: 36px;
margin-right: -5px;
position: absolute;
width: 21px;
}
</style>
</head>
<body style="font-size:62.5%;">
<div id="slider"></div>
</body>
</html>
감사합니다.
내가 불을 지르고의 코드와 새로운 클래스'첫 handle' 광고 '두 번째 handle'가 추가되지 않습니다 보았다. – Chris22