Jquery滑块不工作原因不明

我想使用jQuery的滑块，我已经使用过很多次 - 但这次它不工作，我不明白为什么。Jquery滑块不工作原因不明

这里是HTML代码，基本上只是一个主滑块div与另一个div里面的幻灯片和每个幻灯片div有一类幻灯片（抱歉漫步，我不能发布这个没有更多的解释）：

<div id="slider"> 
<div id="slides"> 
    <div class="slide"> 
     <img src="images/portfolio/web1.jpg" alt=""/> 
    </div> 
    <div class="slide"> 
     <img src="images/portfolio/web5.jpg" alt=""/> 
    </div> 
</div> 
    <img src="images/arrow-L.png" alt="Left" id="slider-arrow-left"/> 
    <img src="images/arrow-R.png" alt="Right" id="slider-arrow-right"/> 
</div>

而CSS，只设置高度和宽度：

#slider{height: 200px; position: relative; z-index: 1;} 
#slider #slides {height: 200px; width: 883px; overflow: hidden; position: absolute; top: 0px; left: 0px;} 
#slider #slides .slide{height: 200px; width: 883px;} 
#slider img#slider-arrow-left {position: absolute; left: -30px; top: 80px; cursor: pointer; z-index: 999;} 
#slider img#slider-arrow-right{position: absolute; right: 0px; top: 80px; cursor: pointer; z-index: 999;}

而且Jquery的：

$(document).ready(function(){ 


    $('#slides').cycle({ 
     fx:  'scrollHorz', 
     speed: 'slow', 
     timeout: 10000, 
     pause: 1, 
     prev: $('#slider-arrow-left'), 
     next: $('#slider-arrow-right'), 
     cssBefore:{ 
      top: 0, 
      opacity: 1, 
      display: 'block' 
     }, 
     animOut: { 
      top: 360 
     }, 
     before: function(curr, next, opts){ 
      var $curr = $(curr); 
      var $next = $(next); 
     }, 
     pause: 1, 
     pager: '#slider-controls', 
     pagerAnchorBuilder: function (idx, slide) { 
      return '#slider-controls li:eq(' + idx + ') a'; 
     } 
    }); 
});

来源

2013-01-01 Molly Campbell

您使用的是什么滑块插件？ –

我没有使用插件，只是上面的脚本。 –

我试过你的例子，使用jQuery cycle plugin。它似乎罚款，

$(document).ready(function(){ 

    $('#slides').cycle({ 
     fx:  'scrollHorz', 
     speed: 'slow', 
     timeout: 0, //prevents auto start of jquery cycle. 
     pause: 1, 
     prev: $('#slider-arrow-left'), 
     next: $('#slider-arrow-right'), 
     cssBefore:{ 
      top: 0, 
      opacity: 1, 
      display: 'block' 
     }, 
     animOut: { 
      top: 360 
     }, 
     before: function(curr, next, opts){ 
      var $curr = $(curr); 
      var $next = $(next); 
     }, 
     pause: 1, 
     pager: '#slider-controls', 
     pagerAnchorBuilder: function (idx, slide) { 
      return '#slider-controls li:eq(' + idx + ') a'; 
     } 
    }); 

});

这里：

jsFiddle

您可以相应地调整它。

来源

2013-01-01 05:30:03

很高兴为您服务，如果它对您有帮助，请将答案标记为已解决。 –

只是一个简单的问题。有没有办法阻止它自动启动？我在一个有多个滑块的组合页面上使用它，我不希望它们自己运行。 –

简单，只需将超时选项设置为'0'，我编辑了上面的代码。 –

Jquery滑块不工作原因不明

回答

相关问题