javascript bxslider javascript滑块不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23145872/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bxslider javascript slider not working
提问by Danny M.
having trouble implementing this bxslider slider. first things first, the images are all visible? how do i make this look like an actual slider?
在实现这个 bxslider 滑块时遇到问题。首先，图像都是可见的？我如何使它看起来像一个实际的滑块？
you can see the issue live here; http://danielmdesigns.com/windermere/index.html
你可以在这里看到这个问题；http://danielmdesigns.com/windermere/index.html
otherwise, i've done exactly what the website told me to =/
否则，我已经完全按照网站告诉我的做了 =/
JS Script
JS脚本
<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />
<script src="bxslider.js" type="text/javascript"></script>
HTML
HTML
<ul class="bxslider">
<li><img src="images/Couple%20on%20Lounge%20Chair_Towneclub.jpg" /></li>
<li><img src="images/Man%20on%20Bench_Towneclub.jpg" /></li>
<li><img src="images/Picnic%20Couple_Towneclub.jpg" /></li>
<li><img src="images/Small%20Golf_Towneclub.jpg" /></li>
</ul>
CSS
CSS
.bxslider{
height:600px;
width:auto;
background-color:#c41230;
/*background-image: url(images/imagescroll_1.png);*/
background-size:cover;
position:relative;
top:95px;
}
JS file
JS文件
$(document).ready(function(){
$('.bxslider').bxSlider();
});
I am an amateur, but all help is very appreciated. Thanks in advance.
我是业余爱好者，但非常感谢所有帮助。提前致谢。
采纳答案by Patrick
You should also add a type to the script like so:
您还应该向脚本添加一个类型，如下所示：
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
回答by TimSPQR
Ok, I simplified your entire page, and changed the images, uploaded this file to my website and it works fine. So your problem is probably in the way you are calling the files in the head, and the lack of the bxSlider function in the script above the </body>tag.
好的，我简化了您的整个页面，并更改了图像，将此文件上传到我的网站，并且运行良好。所以你的问题可能出在你调用头部文件的方式上，以及</body>标签上方脚本中缺少 bxSlider 函数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>testslider</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="jquery.bxslider.js"></script>
<link href="jquery.bxslider.css" rel="stylesheet" />
<style>
.bxslider {
height: 600px;
width: auto;
background-color: #c41230;
background-size: cover;
position: relative;
border: 1px solid red;
}
</style>
</head>
<body>
<ul class="bxslider">
<li><img src='http://img4.wikia.nocookie.net/__cb20130627150007/disney/images/a/aa/Goofy-11.jpg' /></li>
<li><img src="https://www.irononsticker.com/images/2012/09/05/Pluto%20Mickey.jpg" /></li>
<li><img src="http://www.getcartoonwallpaper.com/wp-content/uploads/2013/12/Minnie-Mouse-4.jpg" /></li>
<li><img src="https://dliq60eur0hds.cloudfront.net/wp-content/uploads/2013/03/yosemite-perfect-3-days-half-dome.jpg" /></li>
</ul>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
</body>
</html>
