安裝BxSlider

我是一個完整的初學者網站設計，我正在努力爲我的公司創建一個更現代化的網站。目前的一個不夠迷人（Greenlite.co.uk）。安裝BxSlider

在花了很多時間試圖爲主頁製作Flash橫幅之後，我想到Flash可能已經過時並且無法從所有平臺查看。這是當我遇到BxSlider時，它真的看起來很棒！如果我只能讓它在我的網站上運行。

我正在使用CoffeeCup Visual Site Designer，然後使用'添加HTML'工具。進入'插入HTML'窗口我已經放置如下;

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
<script src="js/jquery.bxslider.min.js"></script> 
<link href="js/jquery.bxslider.css" rel="stylesheet" /> 


<ul class="bxslider"> 
    <li><img src="images/timeline1.jpg" title="An Energy Conservation Company"></li> 
<li><img src="images/image1.jpg" title="Designers and Manufactors of Quality Lighting Controls"></li> 
<li><img src="images/back12.jpg" title="Caption to go here"></li> 

</ul> 

<script type="text/javascript">$(document).ready(function(){ 
$('.bxslider').bxSlider(); 
}); 
mode: fade, 
captions: true, 
auto: true, 
autoControls: false 
}); 
}); 
</script>

我已經按照bxslider.com上顯示的說明進行了操作。我從bxslider下載了這個軟件包，將這些文件添加到了coffeecup中，並鏈接了腳本中的位置。我還將我的圖像添加到CoffeeCup並在他們的位置寫下。

當我預覽我的網站時，我將會收到我的三個圖像，每個圖像都在一個顯示下，另一個顯示在鼠標上方。圖像旁邊是一個重點。

我試圖實現的是一個Bxslider自動啓動，顯示停止/開始控件和標題。

我已經嘗試了很多變化，我已經顯示的腳本是我的原始嘗試。

最近我得到一個工作的Bxslider是通過複製我從舊版本bxslider網站找到的代碼。這給了我一個帶有標題的圖像幻燈片。如果我試圖按照我的規範編輯代碼，那麼它會讓我回到原點。

我完全意識到我可能會犯一個非常明顯的錯誤。然而，對於未經訓練的眼睛，它只給我頭痛。任何幫助將主要讚賞。

來源

2013-01-11 Craig Walker

您擁有的Javascript無效。嘗試改變Javascript來：

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('.bxslider').bxSlider({ 
     mode: 'fade', 
     captions: true, 
     auto: true, 
     autoControls: false 
    }); 
    }); 
</script>

見工作的jsfiddle - http://jsfiddle.net/FLuRH/

來源

2013-01-11 09:56:10

謝謝你的快速響應！您剛剛發送的JavaScript是昨晚朋友發給我的複印件。我也嘗試用相同的結果代替原來的。 –

嘗試用上面的jsfiddle（http://pastebin.com/97FCHjaG）中的代碼替換代碼中的腳本/鏈接標記。 –

唯一出現在我身上的是，如果您看到我的（受過良好教育的）朋友給出了相同的答案，那麼我以某種方式將文件鏈接到了錯誤的地方？ –

我注意到一些東西，可能是一個問題：
你沒有關閉了一些代碼的一部分正常
這是你的：

<script type="text/javascript"> 
     $(document).ready(function(){ 
     $('.bxslider').bxSlider({ 
      mode: 'fade', 
      captions: true, 
      auto: true, 
      autoControls: false 
     }); 
     }); 
</script>

這是我的：

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('.bxslider').bxSlider({ 
     mode: 'fade', 
     captions: 'true', 
     auto: 'true', 
     autoControls: 'false', 
    }); 
    }); 
</script>

此外，我把這個代碼的一部分「頭」一節中和它的工作。試一試。我希望我能以某種方式幫助。

來源

2013-09-26 11:48:47

這裏是工作的代碼（只是創建新的HTML文件，其中u提取bxslider文件夾）

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script src="jquery.bxslider.min.js"></script> 
    <link href="jquery.bxslider.css" rel="stylesheet" /> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $(".bxslider").bxSlider(); 
     }); 
    </script> 
</head> 

<body> 
    <div style="width:700px;height:250px;align:center;padding-left:250px;"> 
     <ul class="bxslider"> 
      <li> 
       <img src="http://localhost/wordpress-4.1/wordpress/wp-content/uploads/2015/02/Desert.jpg" /> 
      </li> 
      <li> 
       <img src="http://localhost/wordpress-4.1/wordpress/wp-content/uploads/2015/02/Desert.jpg" /> 
      </li> 
      <li> 
       <img src="http://localhost/wordpress-4.1/wordpress/wp-content/uploads/2015/02/Desert.jpg" /> 
      </li> 
     </ul> 
    </div> 
</body> 
</html>

來源

2015-02-13 12:09:28

回答

相關問題