JQuery 싸이클 플러그인 - 버튼 - 우수한 라이브러리

저는 JQuery를 처음 사용합니다. 기능 상자를 만들려면 JQuery주기 플러그인을 사용하고 있습니다. 문제는 그 1,2,3,4 탐색을 "클릭 가능한"블록 버튼으로 대체하는 방법을 알아낼 수 없다는 것입니다.JQuery 싸이클 플러그인 - 버튼

는 복사하고이 링크에서 실행하는 모든 코드를 붙여 넣을 수 있습니다

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>test</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script> 
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
     var parentLI = $(this).parent('li'); 
     var controller = $(this); 

var $featured_content = $('#slideshow'); 
if ($featured_content.length) { 
    $('#slideshow').cycle({ 
    timeout: 0,   
    speed: 500, 
    cleartypeNoBg: true, 
    cleartype: true, 
    pager: '#controller', 
    fx: 'fade', 
}); 
} 


$('.controller').click(function(event){ 
     var parentLI = $(this).parent('li'); 
     var controller = $(this); 
     // clickable 


     if (parentLI.hasClass('active')) { 
      return false; 
     } 


    $('.active').removeClass('active'); 
     parentLI.addClass('active'); 
     event.preventDefault(); 
}); 


}); 

</script> 
    <style type="text/css"> 
ol,ul{list-style:none; 
    } 
#slideshow { 
    float:left; 
    width:962px; 
    height:308px; 
    border-bottom:#000 1px solid; 
} 
#slide { 
    float:left; 
    width:962px; 
    height:308px; 
    background: #FFF; 
} 
.imags1 { 
    background: green; 
no-repeat; 
    height:290px; 
    margin:20px auto; 
} 
.imags2 { 
    background: red; 
no-repeat; 
    height:290px; 
    margin:20px auto; 
} 
.imags3 { 
    background: yellow; 
no-repeat; 
    height:290px; 
    margin:20px auto; 
} 
.imags4 { 
    background: purple; 
no-repeat; 
    height:290px; 
    margin:20px auto; 
} 
#controller { 
    float:left; 
    width:962px; 
    height:179px; 
    border-top:1px solid #000; 
} 
.controller { 
    font-size:11px; 
    ; 
} 
#controller h3 { 
    font-size:13px; 
    font-weight:bold; 
} 
#controller .active h1 { 
    color: #DD9A40; 
} 
#controller ul { 
    padding:0; 
    margin:0; 
} 
#controller li.active { 
    background: #6690c5; 
} 

#controller ul li { 
    float:left; 
    cursor: pointer; 
} 
#controller ul li .controller { 
    float:left; 
    width:191px; 
    height:160px; 
    padding: 20px 24px 0; 
    border-left:1px solid #000; 
} 
</style> 
    </head> 

    <body> 
    <div id="slideshow"> 
     <div id="slide"> 
     <div class="imags1"> </div> </div> 
     <div id="slide"> 
     <div class="imags2"> </div> </div> 
      <div id="slide"> 
     <div class="imags3"> </div> </div> 
      <div id="slide"> 
     <div class="imags4"> </div> </div> 
     </div> 
     <div id="controller"> 
     <ul> 
      <li class="active"> 
      <div class="controller"> 
       <h1>hello 1</h1> 

      </div> 
      </li> 
      <li > 
      <div class="controller"> 
       <h1>hello 2</h1> 

      </div> 
      </li> 
      <li > 
      <div class="controller"> 
       <h1>hello 3</h1> 


      </div> 
      </li> 
      <li> 
      <div class="controller"> 
       <h1>Hello 4</h1> 


      </div> 
      </li> 
     </ul> 
     </div> 
    </div> 
</body> 
</html>

출처

2012-01-24 olo

: 사람이 많은 감사 여기

에 도움이 될 수 있다면 http://htmledit.squarefree.com

정말 감사 코드입니다 귀하의 사이클 플러그인에서 옵션 호출기가 있습니다 : '#controller', 그것은 컨트롤러 div에 페이지 매기기/숫자를 삽입하도록 플러그인에 지시합니다. 당신이 다른 div (스타일 포함)를 페이지에 만들고 호출기를 변경하면 새 div ID로 '#controller'옵션이 그 div에 배치됩니다. 이제는 div에 스타일을 지정하는 방법과 html 내에 배치하는 방법에 따라 다릅니다. 예를 들어 당신이 변화를 참조주기 플러그인

pager: '#pagination'

당신이 그 숫자가 나타 할 수

<style> 
    #pagination{margin:auto;width:100px;height:15px;} 
    #pagination a{color:green;border:solid red 1px;} 
</style> 
<div id='pagination'></div>

놓습니다 사업부를위한 새로운 사업부를 만든 다음 변경할 수 있습니다, 당신은 그것을 얻을 것이다.

출처

2012-01-24 02:31:51

내비게이션의 의미를 설명 할 수 있습니까? 번호는 페이지 나 메뉴 바를 울리고 있습니다. –

JQuery 싸이클 플러그인 - 버튼

답변

관련 문제