bxslider javascript滑塊不起作用

Question

在實現這個 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();
});

我是業余愛好者，但非常感謝所有幫助。 提前致謝。

Answer 1

好的，我簡化了您的整個頁面，並更改了圖像，將此文件上傳到我的網站，並且運行良好。 所以你的問題可能出在你調用頭部文件的方式上，以及</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>

Answer 2

您還應該向腳本添加一個類型，如下所示：

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

bxslider javascript滑塊不起作用

問題描述

2 個解決方案

解決方案1
1 2014-04-18 03:43:53

解決方案2
1 已采納 2015-02-27 13:43:00

bxslider javascript滑塊不起作用

問題描述

2 個解決方案

解決方案1 1 2014-04-18 03:43:53

解決方案2 1 已采納 2015-02-27 13:43:00

解決方案1
1 2014-04-18 03:43:53

解決方案2
1 已采納 2015-02-27 13:43:00