【发布时间】:2014-06-22 00:01:30
【问题描述】:
尝试在网站上实现 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;
}
【问题讨论】:
-
您在控制台中有一些错误 .. 特别是找不到:
"NetworkError: 404 Not Found - http://villabalder.se/VBv2/js/jquery.backstretch.min.js"和"NetworkError: 404 Not Found - http://villabalder.se/VBv2/js/modernizr.custom.36240.js"我假设这会破坏您的 jQuery .. 在旁注中,控制台是一个工具会大大增加您的故障排除时间..值得花时间学习正确使用..