更改Jquery Cycle插件代码（移动Pager位置）

发布于 2024-10-18 03:03:09 字数 1463 浏览 10 评论 0原文

我有这个：

<script type="text/javascript">
$(function() {
$('#slideshow').after('<div id="slideshow-nav">').cycle({
    fx:       'fade',
    timeout:   0,
    prev: '#prev',
    next: '#next',
    fit:1,
    pager:      '#slideshow-prevnext',
    pagerAnchorBuilder: function(idx, slide) { 
    return '<a class="dot" href="#">&nbsp;</a>'; 
        }
});
});

它使 HTML 标记如下所示：

 <div id="slideshow-prevnext" class="slideshow-prevnext"> 
   <a id="prev" class="left"  href="#"><span class="invisible">Prev</span></a> 
   <a id="next" class="right" href="#"><span class="invisible">Next</span></a> 
   <a href="#" class="dot">&nbsp;</a>
   <a href="#" class="dot">&nbsp;</a>
   <a href="#" class="dot">&nbsp;</a>
</div>

如何更改 Cycle 选项，以便它可以移动“Prev”和“Next”之前的三个“点”类？如：

 <div id="slideshow-prevnext" class="slideshow-prevnext"> 
   <a href="#" class="dot">&nbsp;</a>
   <a href="#" class="dot">&nbsp;</a>
   <a href="#" class="dot">&nbsp;</a>
   <a id="prev" class="left"  href="#"><span class="invisible">Prev</span></a> 
   <a id="next" class="right" href="#"><span class="invisible">Next</span></a> 
</div>

谢谢，

原文

I have this:

<script type="text/javascript">
$(function() {
$('#slideshow').after('<div id="slideshow-nav">').cycle({
    fx:       'fade',
    timeout:   0,
    prev: '#prev',
    next: '#next',
    fit:1,
    pager:      '#slideshow-prevnext',
    pagerAnchorBuilder: function(idx, slide) { 
    return '<a class="dot" href="#"> </a>'; 
        }
});
});

And it makes HTML markup like this:

 <div id="slideshow-prevnext" class="slideshow-prevnext"> 
   <a id="prev" class="left"  href="#"><span class="invisible">Prev</span></a> 
   <a id="next" class="right" href="#"><span class="invisible">Next</span></a> 
   <a href="#" class="dot"> </a>
   <a href="#" class="dot"> </a>
   <a href="#" class="dot"> </a>
</div>

How can I change Cycle option so that it can move the three "dot" class before "Prev" and "Next"? Such as:

 <div id="slideshow-prevnext" class="slideshow-prevnext"> 
   <a href="#" class="dot"> </a>
   <a href="#" class="dot"> </a>
   <a href="#" class="dot"> </a>
   <a id="prev" class="left"  href="#"><span class="invisible">Prev</span></a> 
   <a id="next" class="right" href="#"><span class="invisible">Next</span></a> 
</div>

Thank you,

分享到QQ

分享到微博