如何在jquery循环插件中删除寻呼机的数字

时间:2011-08-23 17:20:34

标签: jquery css xhtml cycle

我正在尝试从使用jquery循环插件时生成的分页器中删除数字。这些数字似乎只出现在IE中,但我仍然需要删除它们。我的代码是:

<div class="feature_span" style="background-color:#000000; background-image: url(images/banner-one.jpg); background-position:top center; background-repeat:repeat-x;" ></div>
<div class="feature_span" style="background-color:#000000; background-image: url(images/banner-two.jpg); background-position:top center; background-repeat:repeat-x;" ></div>
<div class="feature_span" style="background-color:#000000; background-image: url(images/banner-one.jpg); background-position:top center; background-repeat:repeat-x;" ></div>
<div class="feature_span" style="background-color:#000000; background-image: url(images/banner-two.jpg); background-position:top center; background-repeat:repeat-x;" ></div>

</div><!--End Homepage Slider-->

<div class="feature_nav"></div>

<script>
     // start slideshow 
    $('#homepage_slider').cycle({ 
        timeout:  7000, 
      //  before:   onBefore ,
        next:   '.feature_next',
        prev:   '.feature_prev',
        pager:  '.feature_nav'
    });
</script>

我确信有一种简单的方法可以解决这个问题。有人可以帮忙吗?

3 个答案:

答案 0 :(得分:2)

此处提供了一些文档:http://jquery.malsup.com/cycle/pager2.html

$('#homepage_slider').cycle({ 
    timeout:  7000, 
  //  before:   onBefore ,
    next:   '.feature_next',
    prev:   '.feature_prev',
    pager:  '.feature_nav',
    pagerAnchorBuilder: function(idx, slide) { 
        return foo;  //Where foo is whatever contents you want in each pager anchor.
    } 
});

答案 1 :(得分:0)

如果您不想要寻呼机,请从您的代码中删除它。 <击> pager: '.feature_nav'

答案 2 :(得分:0)

这是我的代码,工作正常。

<强> HTML

<div id="slider" class="pics">
        <img src="images/beach1.jpg" width="200" height="200" />
        <img src="images/beach2.jpg" width="200" height="200" />
        <img src="images/beach3.jpg" width="200" height="200" />
        <img src="images/beach4.jpg" width="200" height="200" />
        <img src="images/beach5.jpg" width="200" height="200" />
        <img src="images/beach6.jpg" width="200" height="200" />
        <img src="images/beach7.jpg" width="200" height="200" />
        <img src="images/beach8.jpg" width="200" height="200" />
    </div>
<ol class="pager"></ol>

<强> JS

$('#slider').cycle({
                 fx: 'fade', 
         pager:  '.pager',     
            // callback fn that creates a thumbnail to use as pager anchor 
            pagerAnchorBuilder: function(idx, slide) { 
                            return '<a href="#"></a>'; //what you want ti return like '<li></li>'
            }

    });

输出:您可以看到

<ol class="pager">
  <a href="#" class=""></a>
  <a href="#" class="activeSlide"></a>
</ol>

作为寻呼机的输出,可以为寻呼机类添加css样式。