從AnythingSlider V1.2遷移到最新版本（v1.8.17）

Question

這是我現在使用滑塊的代碼：

JAVASCRIPT

function formatText(index, panel) { 
return index + ""; 


$(function() { 

    $('.anythingSlider').anythingSlider({ 
     easing: "easeInOutExpo",  // Anything other than "linear" or "swing" requires the easing plugin 
     autoPlay: true,     // This turns off the entire FUNCTIONALY, not just if it starts running or not. 
     delay: 5000,     // How long between slide transitions in AutoPlay mode 
     startStopped: false,   // If autoPlay is on, this can force it to start stopped 
     animationTime: 600,    // How long the slide transition takes 
     hashTags: true,     // Should links change the hashtag in the URL? 
     buildNavigation: false,   // If true, builds and list of anchor links to link to each slide 
     pauseOnHover: true,    // If true, and autoPlay is enabled, the show will pause on hover 
     startText: "Go",    // Start text 
     stopText: "Stop",    // Stop text 
     navigationFormatter: formatText // Details at the top of the file on this use (advanced use) 
    }); 

    $("#slide-jump").click(function(){ 
     $('.anythingSlider').anythingSlider(5); 
    }); 

}); 

HTML

<div class="anythingSlider"> 
    <div class="wrapper"> 
     <ul> 
     <li> 
      <p><img alt="" width="582" height="255" src="IMAGELINK"></p> 
      <div class="container"><a href="LINK" class="info">TEXT</a></div> 
     </li> 
     <li> 
      <p><img alt="" width="582" height="255" src="IMAGELINK"></p> 
      <div class="container"><a href="LINK" class="info">TEXT</a></div> 
     </li>       
     </ul> 
    </div> 
</div> 

這是它在JSFiddle上工作：http://jsfiddle.net/LUEwg/1/

正如你可以看到它使用jQuery（1.9.1），AnythingSlider（v1.2）和Easing插件（來自「外部資源」）。 我想遷移到最新的AnythingSlider版本，即v.1.8.17。

問題是我的代碼需要一些更改，因爲它與AnythingSlider 1.8.17不兼容。

在這裏，您可以看到新老版本之間的差異： http://diffchecker.com/3zadzbvc

Answer 1

在版本的主要差異是HTML是如何設置的。與上面的共享，原始版本的HTML將被設置如下（demo）：

<div class="anythingSlider"> 
    <div class="wrapper"> 
     <ul> 
     <li> 
      <p><img alt="" width="582" height="255" src="IMAGELINK"></p> 
      <div class="container"><a href="LINK" class="info">TEXT</a></div> 
     </li> 
     <li> 
      <p><img alt="" width="582" height="255" src="IMAGELINK"></p> 
      <div class="container"><a href="LINK" class="info">TEXT</a></div> 
     </li>       
     </ul> 
    </div> 
</div> 

在最新版本

，兩個div包裝由腳本添加的，所以從ul開始：

<ul id="slider"> 
    <li> 
     <p><img alt="" width="582" height="255" src="IMAGELINK"></p> 
     <div class="container"><a href="LINK" class="info">TEXT</a></div> 
    </li> 
    <li> 
     <p><img alt="" width="582" height="255" src="IMAGELINK"></p> 
     <div class="container"><a href="LINK" class="info">TEXT</a></div> 
    </li>       
</ul> 

正因爲如此，在CSS已經完全重寫，所以包括默認的CSS，並添加以下自定義CSS：

/*** Set Slider dimensions here! Version 1.7+ ***/ 
/* added #slider li to make panels the same size in case "resizeContents" is false */ 
ul#slider, ul#slider li { 
    width: 589px; 
    height: 296px; 
    list-style: none; 
} 

.anythingSlider.anythingSlider-default .arrow.forward a { 
    background:url(http://lorenzoraffio.com/images/next.png) no-repeat left top; 
    right:6px; 
} 
.anythingSlider.anythingSlider-default .arrow.back a { 
    background:url(http://lorenzoraffio.com/images/prev.png) no-repeat left top; 
} 
.anythingSlider a { 
    color:#706b6b; 
} 
.anythingSlider a.info { 
    background:url(http://lorenzoraffio.com/images/marker1.png) no-repeat left 1px; 
    text-decoration:none; 
    padding-left:20px; 
    float:right; 
} 

.anythingSlider a.info { 
    background:url(http://lorenzoraffio.com/images/marker1.png) no-repeat left 1px; 
    text-decoration:none; 
    padding-left:20px; 
    float:right; 
} 
.anythingSlider a.info:hover { 
    text-decoration:underline; 
    color:#000; 
} 
.anythingSlider p { 
    margin-bottom:0; 
} 
.anythingSlider .container { 
    padding:8px 25px 0 22px; 
    width:auto; 
} 

唯一改變你的javascript的是，我添加了buildStartStop: false選項，而不是使用css：#start-stop { display:none; }