代码之家 › 专栏 › 技术社区 › MultiformeIngegno

从AnythingSlider v1.2迁移到最新版本(v1.8.17)

anythingslider slider jquery-plugins jquery javascript

MultiformeIngegno · 技术社区 · 13 年前

这是我现在使用的滑块的代码:

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

1 回复 | 直到 13 年前

Mottie 13 年前

版本之间的主要区别在于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; }