2012-10-31 117 views
0

我在Twitter Bootsrap结构中使用了以下jQuery .cycle插件,它也使用nav作为div类。我怎样才能得到这个运行,而不使用#nav作为div的名称?#nav干扰周期

感谢互联网人。

乔伊

<style type="text/css"> 
#slideshow { left: 20px } 
#nav { width: 100%; height: 80px; margin: 15px; } 
#nav li { width: 50px; float: left; margin: 8px; list-style: none } 
#nav a { width: 50px; padding: 3px; display: block; border: 1px solid #ccc; } 
#nav li.activeSlide a { background: #88f } 
#nav a:focus { outline: none; } 
#nav img { border: none; display: block } 
</style> 
<!--<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>--> 
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script> 
<!--<script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.3.js"></script>--> 
<script type="text/javascript"> 
$(function() { 
    $('#slideshow').before('<ul id="nav">').cycle({ 
     fx:  'fade', 
     speed: 'fast', 
     timeout: 0, 
     pager: '#nav', 
     pagerAnchorBuilder: function(idx, slide) { 
      return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>'; 
     } 
    }); 
}); 
</script> 

<div id="slideshow" class="pics"> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" /> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" /> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" /> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" /> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" /> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="200" height="200" /> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" width="200" height="200" /> 
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach8.jpg" width="200" height="200" /> 
</div> 

回答

0

因为你定义的选项寻呼机的选择,你可以给它任何你想要的ID。只需在循环的css和初始化代码中更改nav的所有实例即可。

+0

我重新将pager#定义为#slide,并使它在小提琴上工作,但不在bootstrap中。感谢您的帮助。 –