开发者

Link on Slide Show

I'm workin开发者_如何学运维g with this sample image slide page and was wondering if anyone could help. It has the links on the top, but I'm looking to put the links on the sides.

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

I know this might be a trivial and newbie question so forgive me as I recently started learning web technologies.

Thank you for your help.


You can instruct the Cycle plugin to construct the Prev, Next and Pager controls in any DOM element by passing selectors to the prev, next and pager arguments in the cycle() method. Here's a very basic example:

<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>

Full documentation on the plugins options can be found at http://jquery.malsup.com/cycle/options.html.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜