文章/答案/技术大牛

发布

社区首页 >问答首页 >bxslider javascript滑块不工作

问bxslider javascript滑块不工作
EN

Stack Overflow用户

提问于 2014-04-18 09:04:39

回答 2查看 11.5K关注 0票数 2

在实现此bxslider滑块时遇到问题。首先，图像都是可见的吗？我如何让它看起来像一个真正的滑块？

你可以在这里看到这个问题的实况；http://danielmdesigns.com/windermere/index.html

否则，我已经完全按照网站告诉我的做了=/

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

 <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

.bxslider{
height:600px;
width:auto;
background-color:#c41230;
/*background-image: url(images/imagescroll_1.png);*/
background-size:cover;
position:relative;
top:95px;
}

JS文件

$(document).ready(function(){
$('.bxslider').bxSlider();
});

我是个业余爱好者，但我非常感谢大家的帮助。提前谢谢。

javascript

jquery

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-02-27 21:43:00

您还应该向脚本添加类型，如下所示：

<script type="text/javascript">
$(document).ready(function(){
    $('.bxslider').bxSlider();
});
</script>

票数 1

Stack Overflow用户

发布于 2014-04-18 11:43:54

好了，我简化了你的整个页面，改变了图片，把这个文件上传到我的网站上，它工作得很好。因此，您的问题可能出在调用头部文件的方式上，以及</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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/23145872

复制

相似问题

问bxslider javascript滑块不工作
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问bxslider javascript滑块不工作EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问bxslider javascript滑块不工作
EN