0

我正在使用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/

我在这里扯头发。

4

1 回答 1

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 并将其修改为您想要的样式，因为插件似乎依赖于它。

于 2009-09-19T15:31:26.057 回答