我正在研究jquery滑块，并在JsFiddle中成功实现但在浏览器中无法正常工作并显示如下错误：
file:///C:/Users/kumarah/Dropbox/Scheduler/FreshStart/VERSION_3.5/skillselection/images/ui-bg_glass_75_e6e6e6_1x400.png net::ERR_FILE_NOT_FOUND
file:///C:/Users/kumarah/Dropbox/Scheduler/FreshStart/VERSION_3.5/skillselection/images/ui-icons_888888_256x240.png net::ERR_FILE_NOT_FOUND
file:///C:/Users/kumarah/Dropbox/Scheduler/FreshStart/VERSION_3.5/skillselection/images/ui-bg_flat_75_ffffff_40x100.png net::ERR_FILE_NOT_FOUND
file:///C:/Users/kumarah/Dropbox/Scheduler/FreshStart/VERSION_3.5/skillselection/images/ui-bg_highlight-soft_75_cccccc_1x100.png net::ERR_FILE_NOT_FOUND
file:///C:/Users/kumarah/Dropbox/Scheduler/FreshStart/VERSION_3.5/skillselection/images/ui-bg_glass_75_dadada_1x400.png net::ERR_FILE_NOT_FOUND
file:///C:/Users/kumarah/Dropbox/Scheduler/FreshStart/VERSION_3.5/skillselection/images/ui-bg_glass_65_ffffff_1x400.png net::ERR_FILE_NOT_FOUND
我尝试在StackOverflow上寻找这个并发现很多答案，但找不到成功。甚至尝试复制图像文件夹中的所有缺失图像，但仍显示缺失。
这是同样的工作小提琴
但不能在浏览器中工作，其代码为
的.js
<script>
$(function() {
// setup master volume
$( "#master1" ).slider({
value: 50,
orientation: "horizontal",
range: "min",
animate: true
});
// setup graphic EQ
$( "#eq1 > span" ).each(function() {
// read initial values from markup and remove that
var value = parseInt( $( this ).text(), 10 );
$( this ).empty().slider({
value: value,
range: "min",
animate: true,
orientation: "vertical"
});
});
});
$(function() {
// setup master volume
$( "#master2" ).slider({
value: 30,
orientation: "horizontal",
range: "min",
animate: true
});
// setup graphic EQ
$( "#eq2 > span" ).each(function() {
// read initial values from markup and remove that
var value = parseInt( $( this ).text(), 10 );
$( this ).empty().slider({
value: value,
range: "min",
animate: true,
orientation: "vertical"
});
});
});
$(function() {
// setup master volume
$( "#master3" ).slider({
value: 20,
orientation: "horizontal",
range: "min",
animate: true
});
// setup graphic EQ
$( "#eq3 > span" ).each(function() {
// read initial values from markup and remove that
var value = parseInt( $( this ).text(), 20 );
$( this ).empty().slider({
value: value,
range: "min",
animate: true,
orientation: "vertical"
});
});
});
$(function() {
// setup master volume
$( "#master4" ).slider({
value: 90,
orientation: "horizontal",
range: "min",
animate: true
});
// setup graphic EQ
$( "#eq4 > span" ).each(function() {
// read initial values from markup and remove that
var value = parseInt( $( this ).text(), 10 );
$( this ).empty().slider({
value: value,
range: "min",
animate: true,
orientation: "vertical"
});
});
});
的index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Multiple sliders</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" href="jquery-ui.css">
<!-- <script src="jquery-1.10.2.js"></script> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/css/bootstrap-slider.css" >
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/bootstrap-slider.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<body style="margin:10px;padding:10px">
<div class = "row">
<div class = "col-md-12">
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px; text-align:center;">
<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
<b>OVERALL</b>
</p>
<div id="master4" align="center" style=" margin:50px 50px 50px 0; color:#ffffff;"></div>
</div>
</div>
<div class = "row">
<div class = "col-md-4">
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px; text-align:center;">
<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
Analytical
</p>
<div id="master1" style="width:260px; margin:15px;"></div>
<p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em; text-align:center;">
<span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span>
Sub Skills
</p>
<div id="eq1">
<span>88</span>
<span>77</span>
<span>55</span>
<span>33</span>
<span>40</span>
<span>45</span>
</div>
</div>
<div class = "col-md-4">
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px; text-align:center;">
<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
Communication
</p>
<div id="master2" style="width:260px; margin:15px;"></div>
<p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em; text-align:center;">
<span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span>
Sub Skills
</p>
<div id="eq2">
<span>77</span>
<span>55</span>
<span>45</span>
<span>70</span>
</div>
</div>
<div class = "col-md-4">
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px; text-align:center;">
<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
Theory
</p>
<div id="master3" style="width:260px; margin:15px;"></div>
<p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em; text-align:center;">
<span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span>
Sub-Skills
</p>
<div id="eq2">
<span>33</span>
<span>40</span>
<span>45</span>
<span>70</span>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
您尚未在页面中包含引导滑块javascript和css。 在页面中包含此css和脚本。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/css/bootstrap-slider.css" >
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/bootstrap-slider.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Multiple sliders</title>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" href="jquery-ui.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/css/bootstrap-slider.css" >
</head>
<body style="margin:10px;padding:10px">
<div class="container-fluid">
<div class = "row text-center">
<div >
<img src="logohead.jpg" style="float: center;width:250px;height:120px;">
</div>
</div>
</div>
<div class = "row">
<div class = "col-md-12">
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px; text-align:center;">
<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
<b>OVERALL</b>
</p>
<div id="master4" align="center" style=" margin:50px 50px 50px 0; color:#ffffff;"></div>
</div>
</div>
<div class = "row">
<div class = "col-md-4">
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px; text-align:center;">
<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
Analytical
</p>
<div id="master1" style="width:260px; margin:15px;"></div>
<p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em; text-align:center;">
<span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span>
Sub Skills
</p>
<div id="eq1">
<span>88</span>
<span>77</span>
<span>55</span>
<span>33</span>
<span>40</span>
<span>45</span>
</div>
</div>
<div class = "col-md-4">
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px; text-align:center;">
<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
Communication
</p>
<div id="master2" style="width:260px; margin:15px;"></div>
<p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em; text-align:center;">
<span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span>
Sub Skills
</p>
<div id="eq2">
<span>77</span>
<span>55</span>
<span>45</span>
<span>70</span>
</div>
</div>
<div class = "col-md-4">
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px; text-align:center;">
<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
Theory
</p>
<div id="master3" style="width:260px; margin:15px;"></div>
<p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em; text-align:center;">
<span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span>
Sub-Skills
</p>
<div id="eq2">
<span>33</span>
<span>40</span>
<span>45</span>
<span>70</span>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.1.0/bootstrap-slider.js"></script>
<script>
$(function() {
// setup master volume
$( "#master1" ).slider({
value: 50,
orientation: "horizontal",
range: "min",
animate: true
});
// setup graphic EQ
$( "#eq1 > span" ).each(function() {
// read initial values from markup and remove that
var value = parseInt( $( this ).text(), 10 );
$( this ).empty().slider({
value: value,
range: "min",
animate: true,
orientation: "vertical"
});
});
});
$(function() {
// setup master volume
$( "#master2" ).slider({
value: 30,
orientation: "horizontal",
range: "min",
animate: true
});
// setup graphic EQ
$( "#eq2 > span" ).each(function() {
// read initial values from markup and remove that
var value = parseInt( $( this ).text(), 10 );
$( this ).empty().slider({
value: value,
range: "min",
animate: true,
orientation: "vertical"
});
});
});
$(function() {
// setup master volume
$( "#master3" ).slider({
value: 20,
orientation: "horizontal",
range: "min",
animate: true
});
// setup graphic EQ
$( "#eq3 > span" ).each(function() {
// read initial values from markup and remove that
var value = parseInt( $( this ).text(), 20 );
$( this ).empty().slider({
value: value,
range: "min",
animate: true,
orientation: "vertical"
});
});
});
$(function() {
// setup master volume
$( "#master4" ).slider({
value: 90,
orientation: "horizontal",
range: "min",
animate: true
});
// setup graphic EQ
$( "#eq4 > span" ).each(function() {
// read initial values from markup and remove that
var value = parseInt( $( this ).text(), 10 );
$( this ).empty().slider({
value: value,
range: "min",
animate: true,
orientation: "vertical"
});
});
});
</script>
</body>
</html>