jQuery的循環2初始化腳本失敗

我可以利用JQ循環2細跟一個div內的所有必需的選項直列，爲目前首選的風格。但我想改用初始化腳本，就像舊的操作方法一樣。我只是希望儘可能地將gallery選項保留在我的標記和外部.js文件中。jQuery的循環2初始化腳本失敗

我已經制作了所有與'inline'方法完美配合的選項，並且鏈接正確，但是這個默默地失敗了，幻燈片恢復爲淡入淡出的默認設置，而我指定了scrollHorz。

我也正在使用一張/下按鈕和動畫陽離子 - 字幕的工作，但沒有動畫和上/下一個按鈕是可見的，但完全失敗。

我的腳本是在一個名爲「functionality.js」文件，我相信我已經遵循的「自定義腳本初始化」 as outlined in the API的說明。我在一個名爲'plugins.js'的文件中插入了所有相關插件，這些文件鏈接的很好，你會在下面的控制檯screengrab中看到它們。

請參閱下面的標記/腳本（這是爲了簡單起見，循環2例的直副本）和控制檯screengrab鏈接：

<a href="#"><span class="prevControl">Prev</span></a> 
<a href="#"><span class="nextControl">Next</span></a> 

<div class="cycle-slideshow"> 
<img src="http://malsup.github.com/images/p1.jpg" data-cycle-title="Spring" data-cycle-desc="Sonnenberg Gardens"/> 
<img src="http://malsup.github.com/images/p2.jpg" data-cycle-title="Redwoods" data-cycle-desc="Muir Woods National Monument"/> 
<img src="http://malsup.github.com/images/p3.jpg" data-cycle-title="Angel Island" data-cycle-desc="San Franscisco Bay"/> 
<img src="http://malsup.github.com/images/p4.jpg" data-cycle-title="Raquette Lake" data-cycle-desc="Adirondack State Park"/> 

<div class="cycle-caption"></div> 
<div class="cycle-overlay"></div> 

</div>

鏈接的腳本：

$('.cycle-slideshow').cycle({ 
fx: scrollHorz, 
timeout: 2000, 
speed: 700, 
prev: ".prevControl", 
next: ".nextControl", 
caption-plugin: caption2, 
overlay-fx-sel: "div" 
});

而且這裏是一個鏈接到a screengrab of the console error

如果任何人可以建議，將不勝感激，我敢肯定這是一個簡單錯誤！

在此先感謝

來源

2013-04-05 redplanet

有一個JavaScript中有一些導致循環失敗的簡單錯誤。當以編程方式初始化幻燈片時，參數需要是camelCase，而不是像使用數據屬性指定時那樣使用連字符。您還需要用引號包裝基於字符串的參數值，否則腳本會認爲它們是變量。下面是你的工作示例的更新版本：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Cycle2 Example</title> 
</head> 
<body> 
    <a href="#"><span class="prevControl">Prev</span></a> 
    <a href="#"><span class="nextControl">Next</span></a> 

    <div class="slides"> 
     <img src="http://malsup.github.com/images/p1.jpg" data-cycle-title="Spring" data-cycle-desc="Sonnenberg Gardens"/> 
     <img src="http://malsup.github.com/images/p2.jpg" data-cycle-title="Redwoods" data-cycle-desc="Muir Woods National Monument"/> 
     <img src="http://malsup.github.com/images/p3.jpg" data-cycle-title="Angel Island" data-cycle-desc="San Franscisco Bay"/> 
     <img src="http://malsup.github.com/images/p4.jpg" data-cycle-title="Raquette Lake" data-cycle-desc="Adirondack State Park"/> 

     <div class="cycle-caption"></div> 
     <div class="cycle-overlay"></div> 
    </div> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script src="http://malsup.github.io/jquery.cycle2.js"></script> 
    <script> 
     $('.slides').cycle({ 
      fx: "scrollHorz", 
      timeout: 2000, 
      speed: 700, 
      prev: ".prevControl", 
      next: ".nextControl", 
      captionPlugin: "caption2", 
      overlayFxSel: "div" 
     }); 
    </script> 
</body> 
</html>

編程設置時幻燈片，以便它不是自動由循環插件初始化我也可能會使用一個ID或大於cycle-slideshow其他類。

來源

2013-07-10 10:05:57 Dylan

非常感謝@迪蘭這完美的作品。我看到你所提出的觀點，非常感謝你的幫助。 – redplanet 2013-07-11 10:29:46

嘿沒問題！ – Dylan 2013-07-12 07:12:11