jQuery AnythingSlider插件不像demo中演示的示例那样工作

时间:2009-09-19 14:58:26

标签: javascript jquery anythingslider

我正在使用AnythingSlider并完成与示例页面完成相同的操作,除了示例页面正在工作,而我的不是。

我知道脚本至少在运行,因为它会创建一些带有“克隆”类的额外<li>标签,但没有任何动作。

文档HEAD中的JavaScript:

$(function () {
   $('#slider').anythingSlider({
      easing: "swing",           // Anything other than "linear" or "swing" 
                                  // requires the easing plugin
      autoPlay: true,            // turns off the entire FUNCTIONALitY
      startStopped: false,       // force it to start stopped if autoplay is on
      delay: 3000,               // time between slide transitions in AutoPlay
      animationTime: 600,        // time 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: false,       // pause on hover if true and autoPlay enabled
      startText: "Start",        // Start text
      stopText: "Stop",          // Stop text
      navigationFormatter: null  // Details at the top of the file on this use
   });
});

(jQuery and the plugin are externally called)

HTML

<div class="container_16 slider" id="slider">
  <div class="wrapper">
      <ul>
          <li>
              <?php echo html::image('resources/images/featuredweb.gif', array('alt' => ' ', 'class' => 'slider-icon')); ?>
              <?php echo html::image('resources/images/website.gif', array('alt' => ' ', 'class' => 'imgborder')); ?>
              <div class="content">
                  <h3>D'Portfolio Theme</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque massa tortor, fermentum ut pellentesque eu, mollis vitae lectus. </p>
                  <strong>Client Name : john doe</strong><br />
                  <strong>Requirement : php / Mysql / Adobe / CSS</strong><br />
              </div>
          </li>
          <li>
              <?php echo html::image('resources/images/featuredweb.gif', array('alt' => ' ', 'class' => 'slider-icon')); ?>
              <?php echo html::image('resources/images/website.gif', array('alt' => ' ', 'class' => 'imgborder')); ?>
              <div class="content">
                  <h3>D'Portfolio Theme</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque massa tortor, fermentum ut pellentesque eu, mollis vitae lectus. </p>
                  <strong>Client Name : john doe</strong><br />
                  <strong>Requirement : php / Mysql / Adobe / CSS</strong><br />
              </div>
          </li>
          <li>
              <?php echo html::image('resources/images/featuredweb.gif', array('alt' => ' ', 'class' => 'slider-icon')); ?>
              <?php echo html::image('resources/images/website.gif', array('alt' => ' ', 'class' => 'imgborder')); ?>
              <div class="content">
                  <h3>D'Portfolio Theme</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque massa tortor, fermentum ut pellentesque eu, mollis vitae lectus. </p>
                  <strong>Client Name : john doe</strong><br />
                  <strong>Requirement : php / Mysql / Adobe / CSS</strong><br />
              </div>
          </li>
      </ul>    
  </div>
</div>

插件示例页面位于:http://css-tricks.com/examples/AnythingSlider/

我在这里撕扯我的头发。

1 个答案:

答案 0 :(得分:1)

我自己没有使用过AnythingSlider插件,但我注意到你的类属性与他们的属性不同。

你有:

 <div class="container_16 slider" id="slider">

他们有

 <div class="anythingSlider">

尝试将您的(以及相关的CSS)更改为

 <div class="container_16 anythingSlider" id="slider">

 <div class="container_16 slider anythingSlider" id="slider">

我用他们的css(而不是你的)测试了你的html,它正在运行。内容正在按预期移动。

我建议使用他们的示例css并将其修改为您想要的样式,因为插件似乎依赖于它。