jquery插件codaslider

我想使用codaslider插件，它不適合我。我認爲我做的是正確的，但仍然無法正常工作。有人可以幫我找出我犯了什麼錯誤。以下是我的代碼如下。問題是它不會從一個面板滑到另一個面板。我已經通過了文檔，但我不知道我在這裏犯的錯誤。jquery插件codaslider

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript" src="plugins/jquery.coda-slider-2.0.js"></script> 
    <script type="text/javascript" src="plugins/jquery.easing.1.3.js"></script> 
    <script type="text/javascript"> 
    $().ready(function() { 
     $('#codaslider5').codaSlider({ 
      dynamicArrows: false, 
      dynamicTabs: false 
     }); 
    }); 
    </script> 
    <style> 
     #nav { width: 500px; background: blue; height: 50px; } 
     ul { list-style: none; margin: 0; } 
     #mainWrapper #nav ul li { float: left; margin-right: 40px; } 
     #slider { width: 500px; background: red; overflow: hidden; } 
     .codaslider { width: 1500px; background: greenyellow; } 
     .panel { width: 500px; height: 100px; float: left; } 
     .panel1 { background: green; } 
     .panel2 { background: lightblue; } 
     .panel3 { background: yellow; } 
    </style> 
    <title>title</title> 
</head> 
<body> 
    <div id="mainWrapper"> 
     <div id="nav"> 
      <ul> 
       <li class="tab1"><a href="#1">Panel 1</a></li> 
       <li class="tab2"><a href="#2">Panel 2</a></li> 
       <li class="tab3"><a href="#3">Panel 3</a></li> 
      </ul> 
     </div> 
     <div id="slider"> 
      <div class="codaslider" id="codaslider5"> 
       <div class="panel panel1"> 
        <h2>Panel 1</h2> 
        <p>This is panel 1</p> 
       </div> 
       <div class="panel panel2"> 
        <h2>Panel 2</h2> 
        <p>This is panel 2</p> 
       </div> 
       <div class="panel panel3"> 
        <h2>Panel 3</h2> 
        <p>This is panel 3</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</body>

來源

2012-02-07 2619

你在'$（）。ready（function（）''中缺少'document'。你通常應該將代碼放在樣式之後。 – 2012-02-07 18:46:27

我添加了文檔並將代碼放在樣式之後但仍然不起作用。 – 2619 2012-02-07 18:49:06

你有Firebug或合適的DOM檢查器嗎？你能檢查腳本的路徑是否正常工作嗎？ – 2012-02-07 18:52:37

好了，我一定是這個亂搞了一個小時左右，不知道爲什麼它沒有工作，因爲喜歡你，因爲這一切看起來像它應該罰款。

我想我找到了解決方案。它似乎是codaSlider挑剔您給滑塊對象的名稱 - 它們必須包含破折號並且必須按順序排列。

你的滑塊命名爲'＃codaslider5'，你需要將它改爲'#coda-slider-1'（如果你使用2,3 ... n它不起作用 - 大概它期望你實際上如果您想使用ID爲5的滑塊，請使用滑塊1,2,3,4）。

這裏，我們去：

變化：

$('#codaslider5').codaSlider({

到

$('#coda-slider-1').codaSlider({

下，變化：

<div id="nav">

到

<div id="coda-nav-1">

接着，變化：

<div class="codaslider" id="codaslider5">

到

<div class="coda-slider" id="coda-slider-1">

或懶惰here is the fixed file，和diff。

這會混淆你的CSS，所以你必須修復它。但希望這可以讓你回到正軌。

來源

2012-02-07 22:19:12 akiller

jquery插件codaslider

回答

相關問題