Question

我正在使用此示例图片幻灯片页面，并想知道是否有人可以提供帮助。它的顶部有链接，但我希望将链接放在两侧。

http://jquery.malsup.com/cycle/pager11.html

我知道这可能是一个微不足道的新手问题，所以请原谅我，因为我最近开始学习网络技术。

感谢您的帮助。

Answer 1

您可以通过将选择器传递给cycle（）方法中的prev，next和pager参数，指示Cycle插件在任何DOM元素中构造Prev，Next和Pager控件。这是一个非常基本的例子：

<script type="text/javascript">
$(document).ready(function() {
     $('#slideshow').cycle({
          prev:    '.prev', // Setup prev links
          next:    '.next', // Setup next links
          pager:   '.nav'       // Setup pager navs
     }); 
});
</script>

<style type="text/css">
#left, #slideshow, #right { float: left; width: 200px; }
</style>

<!-- left nav bar -->
<div id="left">
    <a href="#"><span class="prev">Prev</span></a> 
    <a href="#"><span class="next">Next</span></a>
    <ul class="nav"></ul>
</div>

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

<!-- right nav bar -->
<div id="right">
    <a href="#"><span class="prev">Prev</span></a> 
    <a href="#"><span class="next">Next</span></a>
    <ul class="nav"></ul>
</div>

有关插件选项的完整文档，请访问http://jquery.malsup.com/cycle/options.html。

幻灯片放映链接

1 个答案: