链接在幻灯片放映

Question

我与这个样本图像幻灯片页面工作，并想知道如果有人能提供帮助。它有顶部的链接，但我希望将链接放在两侧。

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

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

谢谢你的帮助。

Answer 1

您可以指示周期插件通过使选择器的一个先前，下一个和寻呼机参数在周期（）方法来构造上一页，下一页和寻呼机控制在任何DOM元素。这里是一个非常简单的例子：

<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找到。