jQuery Unslider本地工作，但不在服务器上

Question

当试图在网站上实现jQuery Unslider时，我有一个奇怪的问题。我把所有的东西都当作魅力在本地工作，但是当我将它上传到我的主机（在这种情况下是One.com）时，它全都崩溃了。幻灯片中的图像现在显示在另一个下面。

我已经查找了代码问题，直到现在我的眼睛向内转。所以，请你能帮助我=）

链接到试验场：http://villabalder.se/VBv2/index.html

脚本：

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> 
<script type="text/javascript" src="js/unslider.js"></script> 

的jQuery：

$(function() { 
    $('.vbslides').unslider({ 
     speed: 500,    // The speed to animate each slide (in milliseconds) 
     delay: 3000,    // The delay between slide animations (in milliseconds) 
     complete: function() {}, // A function that gets called after every slide animation 
     keys: true,    // Enable keyboard (left, right) arrow shortcuts 
     dots: true,    // Display dot navigation 
     fluid: false    // Support responsive design. May break non-responsive designs 
     }); 
    }); 

HTML：

<div class="vbslides"> 
<ul> 
    <li><img src="img/villabalder_ext1.jpg"></li> 
    <li><img src="img/villabalder_ext2.jpg"></li> 
    <li><img src="img/villabalder_int1.jpg"></li> 
    <li><img src="img/villabalder_int2.jpg"></li> 
</ul> 
</div> 

CSS：

.vbslides { 
    position: relative; 
    overflow: no; 
} 

.vbslides ul { 
    list-style: none; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 

.vbslides ul li { 
    display: block; 
    float: left; 
    margin: 0; 
    padding: 0; 
} 

    .vbslides .dot { 
    -webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); 
    -moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); 
    -ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); 
    -o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); 
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); 
} 

.vbslides .dots { 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 20px; 
} 

    .vbslides .dots li { 
     display: inline-block; 
     width: 10px; 
     height: 10px; 
     margin: 0 4px; 

     text-indent: -999em; 

     border: 2px solid #fff; 
     border-radius: 6px; 

     cursor: pointer; 
     opacity: .4; 

     -webkit-transition: background .5s, opacity .5s; 
     -moz-transition: background .5s, opacity .5s; 
     transition: background .5s, opacity .5s; 
    } 

     .vbslides .dots li.active { 
      background: #fff; 
      opacity: 1; 
     } 

Answer 1

所以你要调用你的头元素如下：

<!-- Övriga jQuery filer --> 
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> 
<script type="text/javascript" src="js/unslider.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script> 
<script type="text/javascript" src="js/jquery.ui.datepicker-sv.js"></script> 

，然后在你的身体结束，你调用这些：

<!-- Hämtar Google CDN jQuery, med lokal back-up --> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script> 

<!-- jQuery --> 
<script src="js/jquery.backstretch.min.js"></script> 
<script src="js/jquery-ui-1.10.3.custom.min.js"></script> 
<script src="js/jquery.ui.datepicker-sv.js"></script> 

这是覆盖$变量，并且您的unslider插件不再被定义。

需要说明的是：您应该只加载一个核心jQuery库，并且它应该（通常）成为您在页面上加载的第一个脚本文件。

Answer 2

尝试使用在线文件来解决问题：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> 
    <script src="http://unslider.com/unslider.min.js"type="text/javascript"></script> 

确保JavaScript的看起来像这样：

<script type="text/javascript"> 

$(function() { 
$('.banner').unslider({ 
    speed: 500,    // The speed to animate each slide (in milliseconds) 
    delay: 3000,    // The delay between slide animations (in milliseconds) 
    complete: function() {}, // A function that gets called after every slide animation 
    keys: true,    // Enable keyboard (left, right) arrow shortcuts 
    dots: true,    // Display dot navigation 
    fluid: false    // Support responsive design. May break non-responsive designs 

}); 
var unslider = $('.banner').unslider(); 

    $('.prev').click(function() { 
     unslider.data('unslider').prev(); 
    }); 

    $('.next').click(function() { 
     unslider.data('unslider').next(); 
    }); 
    return false; 
}); 
</script> 

如果你仍然有问题的复制/粘贴这个例子.html文件

<!-- The HTML --> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 

    <head> 
    <title>Unslider.com arrow example</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> 
    <script src="http://unslider.com/unslider.min.js"type="text/javascript"></script> 

     <!-- JavaScript --> 

    <script type="text/javascript"> 

$(function() { 
$('.banner').unslider({ 
    speed: 500,    // The speed to animate each slide (in milliseconds) 
    delay: 3000,    // The delay between slide animations (in milliseconds) 
    complete: function() {}, // A function that gets called after every slide animation 
    keys: true,    // Enable keyboard (left, right) arrow shortcuts 
    dots: true,    // Display dot navigation 
    fluid: false    // Support responsive design. May break non-responsive designs 

}); 
var unslider = $('.banner').unslider(); 

    $('.prev').click(function() { 
     unslider.data('unslider').prev(); 
    }); 

    $('.next').click(function() { 
     unslider.data('unslider').next(); 
    }); 
    return false; 
}); 
</script> 

    <!-- CSS --> 
    <style type="text/css"> 

* { 
    margin: 0; 
    padding: 0; 
    -webkit-box-sizing: border-box; 
} 

.banner { 
position: relative; 
width: 100%; 
overflow: auto; 
top: 50px; 
/*z-index: -1;*/ 

font-size: 18px; 
line-height: 24px; 
text-align: center; 

color: #FFFFFF; 
text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3); 

background: #FFFFFF; 
box-shadow: 0 1px 2px rgba(0,0,0,.25); 
} 
.banner ul { 
list-style: none; 
width: 300%; 
} 
.banner ul li { 
display: block; 
float: left; 

min-height: 500px; 

-o-background-size: 100% 100%; 
-ms-background-size: 100% 100%; 
-moz-background-size: 100% 100%; 
-webkit-background-size: 100% 100%; 
background-size: 100% 100%; 

box-shadow: inset 0 -3px 6px rgba(0,0,0,.1); 
} 

.banner .inner { 
padding: 360px 0 110px; 

float: left; 
vertical-align:-100px; 
} 

.banner h1, .banner h2 { 

font-size: 40px; 
line-height: 52px; 
color: #fff; 
} 

.banner .btn { 
display: inline-block; 
margin: 25px 0 0; 
padding: 9px 22px 7px; 
clear: both; 

color: #fff; 
font-size: 12px; 
font-weight: bold; 
text-transform: uppercase; 
text-decoration: none; 
border : rgba(255, 255, 255, 0.4) solid 2px; 
border-radius: 5px; 
} 
.banner .btn:hover { 
background : rgba(255, 255, 255, 0.05); 
} 
.banner .btn:active { 
-webkit-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); 
-moz-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); 
-ms-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); 
-o-filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); 
filter: drop-shadow(0 -1px 2px rgba(0,0,0,.5)); 
} 

.banner .btn, .banner .dot { 
-webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); 
-moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); 
-ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); 
-o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); 
filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); 
} 

.banner .dots { 
position: absolute; 
left: 0; 
right: 0; 
bottom: 20px; 
width: 100%; 
} 
.banner .dots li { 
display: inline-block; 

width: 10px; 
height: 10px; 
line-height: 10px; 
margin: 0 4px; 

text-indent: -999em; 


border: 2px solid #fff; 
border-radius: 6px; 

cursor: pointer; 
opacity: .4; 

-webkit-transition: background .5s, opacity .5s; 
-moz-transition: background .5s, opacity .5s; 
transition: background .5s, opacity .5s; 
} 
.banner .dots li.active { 
background: #fff; 
opacity: 1; 
} 




.unslider-arrow { 
    font-family: Expressway; 
    font-size: 50px; 
    text-decoration: none; 
    color: #3d3d3d; 
    background: rgba(255,255,255,0.7); 
    padding: 0 20px 5px 20px; 
} 

.next { 
    position: absolute; 
    top: 65%; 
    right: 0 
} 

.prev { 
    position: absolute; 
    top: 65%; 
    right: 90 /* change to left:0; if u wanna have arrow on left side */ 
} 
</style> 
    </head> 
    <!-- Body of HTML document --> 

    <body> 
     <div class="slider"> 
     <div class="banner"> 
      <ul> 
      <li><img src="http://lorempixel.com/1200/600/" alt="pixel" width="100%" /></li> 
      <li><img src="http://lorempixel.com/1200/600/" alt="pixel" width="100%" /></li> 
      <li><img src="http://lorempixel.com/1200/600/" alt="pixel" width="100%" /></li> 
      <li><img src="http://lorempixel.com/1200/600/" alt="pixel" width="100%" /></li> 
     </ul> 
     </div> 
      <a href="#" class="unslider-arrow prev">&larr;</a> 
      <a href="#" class="unslider-arrow next">&rarr;</a> 
     </div> 
    </body> 

</html>