bxslider無法正常工作

在使bxSlider正常工作時遇到問題。我錯了我想象的最後一步 - 調用bxSlider。一切都從相同的文件夾鏈接。bxslider無法正常工作

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<!-- 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="jquery.bxslider.min.js"></script> 
<!-- bxSlider CSS file --> 

<link href="jquery.bxslider.css" rel="stylesheet" /> 
<script type="text/javascript"> 
    jQuery(document).ready(function(){ 
     jQuery('.bxslider').bxSlider({ 
      slideWidth: 200, 
      minSlides: 2, 
      maxSlides: 3, 
      slideMargin: 10 
     }); 
    });  
</script> 
</head> 

<body> 
<ul class="bxslider"> 
    <li><img src="../Luke Portfolio 2 - rough_idea/factormedia.co.za/images/fader1.png" /></li> 
    <li><img src="../Luke Portfolio 2 - rough_idea/factormedia.co.za/images/fader2.png" /></li> 
</ul> 
</body> 
</html>

來源

2015-10-19 factordog

您可以使用jQuery 1.8.3。

您的代碼存在一些問題。這裏的工作小提琴： http://jsfiddle.net/fq23j3sr/7/

在你的JS，你試圖初始化bxSlider()功能，之前你實際加載你試圖引用插件。簡單移動：

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

下面的插件代碼將解決未定義函數錯誤的問題。

希望這會有所幫助。

編輯： 自動啓動 - 如要求在評論：

$(document).ready(function() { 
    $('.wrapper').bxSlider({ 
     'auto' : true, 
     'autoStart' : true 
    }); 
});

來源

2015-10-19 18:50:48 disinfor

@isherwood是的，它似乎它。我會調整我的答案。 – disinfor

@isherwood初始化腳本實際上在OP原始的小提琴中發生了兩次--JS文件的頂部和HTML窗口 - 它不會呈現該JS。 OP也沒有在小提琴設置中加載jQuery。 – disinfor

好的。我沒有看着小提琴，而是假定發佈的代碼更準確。 – isherwood

你的小提琴已經有點亂了，所以我創建了自己。這裏是一個工作示例：http://jsfiddle.net/jbLm2spv/ 我認爲你的代碼中的問題是你使用jQuery 1.8.2，這對於bxSlider來說可能太舊了。使用更新的jQuery版本，如2.1.3。

的HTML標記：

<ul class="bxslider"> 
    <li><img src="https://placeholdit.imgix.net/~text?txtsize=47&bg=000&txtclr=fff&txt=500%C3%97300&w=500&h=300" /></li> 
    <li><img src="https://placeholdit.imgix.net/~text?txtsize=47&bg=ccc&txtclr=fff&txt=500%C3%97300&w=500&h=300" /></li> 
    <li><img src="https://placeholdit.imgix.net/~text?txtsize=47&bg=000&txtclr=fff&txt=500%C3%97300&w=500&h=300" /></li> 
    <li><img src="https://placeholdit.imgix.net/~text?txtsize=47&bg=ccc&txtclr=fff&txt=500%C3%97300&w=500&h=300" /></li> 
</ul>

的JS：

$('.bxslider').bxSlider({ 
      slideWidth: 200, 
      minSlides: 2, 
      maxSlides: 3, 
      slideMargin: 10 
});

來源

2015-10-19 18:26:01 sticksu

會似乎是一個愚蠢的問題。但我在哪裏可以找到2.1.3的ajax庫的相關鏈接.....如果網站上的教程肯定會給1.8.2版本，它應該可以工作？ – factordog

當我在我的小提琴上將它改爲2.1.3時，它似乎確實有效。問題出現在我不知道如何糾正問題的地方。 – factordog

您可以從這裏下載：http：//jquery.com/download/。那麼，在我的小提琴中，我用jQuery 2.1.3試了一下，它工作。這裏是縮小版本，最新的，2.1.4：http://code.jquery.com/jquery-2.1.4.min.js – sticksu

你看到在控制檯的任何錯誤？您正在排隊bxslider的方式假定您已經下載了該文件，並在同一個目錄中您的index.html：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
// This assumes you jquery.bxslider.min.js is in the same folder as the file that loads this page. 
<script src="jquery.bxslider.min.js"></script>

編輯：

好吧，聽起來像是你有幾個錯誤修復。首先，jQuery沒有被定義。您需要將http添加到jQuery路徑的開頭，否則它將查看file：//協議，這意味着它在本地機器上查找，而不是您託管jQuery庫的URL試圖加載：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

這應該解決您的「$未定義」錯誤。

其次，您需要下載jquery.bxslider.min.js文件，並將其放在相應的目錄中。現在你已經擁有了它的方式，它正在尋找與加載頁面的文件（例如index.html）相同的目錄。你可以把它放在那裏，或者你可以創建一個新的目錄（爲了更好的組織），並把它放在那裏。我會建議創建一個名爲「js」的文件夾。

下載它，你可以將文本從這個鏈接複製：

https://raw.githubusercontent.com/stevenwanderski/bxslider-4/master/dist/jquery.bxslider.min.js

，並將其保存到一個名爲jquery.bxslider.min.js文件，無論是在同一水平的指標.html或在一個js文件夾中，並相應地更新你的腳本源：

<script src="js/jquery.bxslider.min.js"></script>

來源

2015-10-19 18:27:26

加載資源失敗：net :: ERR_FILE_NOT_FOUND jquery.bxslider.min.js：10 Uncaught ReferenceError：jQuery沒有定義滑塊。html：14 Uncaught ReferenceError：$未定義是3錯誤 – factordog

有報道說，是你的小提琴的操作根本的幾個問題。這是原始的fork。

圖片的網址是相對不絕對的。網址中也有空格。
- WRONG ~~../Luke Portfolio 2 - rough_idea/factormedia.co.za/images/fader1.png~~
- 正確 http://www.example.com/Luke%20Portfolio%202%20-%20rough_idea/factormedia.co.za/images/fader1.png
使用的jsfiddle，你應該使用rightside面板輸入網址到外部文件。
- jquery.bxslider.min.js和jquery.bxslider.css應上傳到自己的網站，或者你應該使用CDN。然後，您需要使用url而不是在編輯面板中粘貼代碼。

來源

2015-10-19 18:54:53 zer00ne

它只是加載一個空白頁面 – factordog

@factordog我不好，抱歉，它現在已經修復。 – zer00ne

bxslider無法正常工作

回答

相關問題