슬라이드 쇼 링크

Question

나는이 샘플 이미지 슬라이드 페이지로 작업하고 있으며 도움이 될지 궁금해하고있었습니다. 그것은 상단에 링크가 있지만, 측면에 링크를 넣어 찾고 있어요.

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

은 내가 최근에 웹 기술을 배우기 시작으로이 사소한와 초보자 질문은 그래서 용서 수 있습니다 알고 있습니다.

도움 주셔서 감사합니다.

Answer 1

cycle() 메소드의 prev, next 및 pager 인수에 선택기를 전달하여 Cygwin 플러그인에서 모든 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에서 찾을 수 있습니다.