jQuery cycle plugin, 호출기 탭 지정하기

Question

일부 기능을 사용하여 mock up 사이트에서 작업 중입니다. 나는 html css와 js로 일하고있다. 내가 만든 사이클 탭을 통해 순환 사이클 플러그인을 사용하고 있습니다. 병이 다음 내가 뭘하려고 오전 설명 내 코드를 게시 :

내 HTML :

<div id="content"> 
    <div id="image_selector" class="image_selector"> 
    <div class ="image"> 
     <ul> 
     <li><a id="Mpowered" href="">Mpowered</a></li> 
     <li><a id="Technology" href="">Technology</a></li> 
     <li><a id="Consulting" href="">Consulting</a></li> 
     <li><a id="Outsourcing" href="">Outsourcing</a></li> 
     </ul> 
    </div> 
    </div> 
    <div class="cell"> 
    <div class="description"> 
     <img id="demoimg" src="/home/***/HTML/launch_pad/images/productivity.png" alt="demo pic"/> 
     <h2>Who are we?</h2> 
     <p> a consulting company... ect</p> 
    </div> 


    <div class="description"> 
     <img id="demoimg" src="/home/***/HTML/launch_pad/images/tech1.jpg" alt="tech"/> 
     <h2>We have the tech!</h2> 
     <p> lots of tech!!.... ect</p> 

    </div> 

... 두 개 더 설명 섹션은 지금과 같이 수행 한 "A"태그의 각 하나있다 탭.

는 CSS는 다음과 같습니다

.image_selector { 
    border: 1px dotted green; 
    height: 130px; 

} 

.image li { 
    float: left; 
    border: 1px solid white; 
    height: 100px; 
    width: 103px; 
    margin-left: 86px; 
    overflow: hidden; 
    text-align: center; 

} 

.image li a { 
    padding: 74px 0px 0px 0px; 
    color: white; 
    text-shadow: 0 0 0.6em #0197E8; 
    font-size: 17px; 
    letter-spacing: 1px; 
    text-decoration: none; 
    display: block; 
    height: 80px; 
    background-repeat: no-repeat; 
} 

.image li a:hover { 
    text-shadow: 0 0 0.6em #0197E8, 0 0 0.4em #0197E8, 0 0 0.6em #0197E8; 

} 


.image li #Mpowered { 
    background-image: url('/home/ruberto/HTML/launch_pad/images/mpower.png'); 
    background-position: center top; 
} 

.image li #Technology { 
    background-image: url('/home/ruberto/HTML/launch_pad/images/tech.png'); 
    background-position: center top; 

} 

.image li #Consulting { 
    background-image: url('/home/ruberto/HTML/launch_pad/images/consulting.png'); 
    background-position: center top; 

} 

.image li #Outsourcing { 
    background-image: url('/home/ruberto/HTML/launch_pad/images/outsourcing.png'); 
    background-position: center top; 

} 

.cell { 
    border: 1px dashed green; 
    height: 318px; 
    width: 715px; 
    float: left; 

} 

#demoimg { 
    float: left; 
    position: static; 
    margin: 16px 8px 0px 0px; 
    height: 200px; 
    width: 200px; 

} 

및 자바 스크립트 스피을 사용하여 :

그래서

$('.cell') 
.before('<div class="image">') 
.cycle({ 
    fx:  'turnDown', 
    speed: 'fast', 
    timeout: 0, 
    pager: '.image' 
}); 

지금 줄에 최대 읽기 및 호출기 옵션은 이제 자신의 항해를 만들 것이라는 점을 이해 섹션을 통해 회전하려는 콘텐츠가있는 div 바로 위에 있습니다. 나는 내가 단지 "이미지"태그를 참조 할 수있는 방법이 있는지 궁금 해서요. 셀 클래스의 탐색 기능을위한 "탭"으로 설정 했습니까?

아무도 그 자리에서 일할 수있는 뭔가를 추천 할 수 없다면?

Answer 1

이러한 기능을 다른 기능과 연결하거나 매핑 할 필요가 있다고 가정하면, 사용자가해야 할 수도있는 다른 참조 할 수있는 호출기를 빌드한다고 가정하면 .index가 필요할 수도 있습니다. 쌍 연결.

가 '(그주기가 페이징 //을 위해 사용할 수 있도록, 어쩌면 단순히 보조 메뉴를 $를 만들 원본을 표시하지 CSS를 사용하지만, 장소에두고, 중복 호출기를 시작할 다른 곳에서 이러한 요소를 복제하려면 #pager '). find ('li ') .clone(). appendTo ('# navpage ul ');

그런 다음 당신은 당신이 개 호출기는이 기능 작업의 링크를 게시 http://jsfiddle.net/moneylotion/KhL3W/