JQuery循環插件 - 按鈕

我是JQuery的新手。我使用JQuery循環插件來創建一個功能框。問題是，我無法弄清楚如何將這些1,2,3,4導航替換爲我的「可點擊」塊按鈕。JQuery循環插件 - 按鈕

您可以複製和粘貼的所有代碼，從這個鏈接運行：http://htmledit.squarefree.com

真的很感激，如果有人可以用這個非常感謝

幫助這裏是代碼：

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

在循環插件中，您有一個選項尋呼機：'#controller'，它告訴插件將分頁/數字插入到控制器div中。如果您在頁面中創建另一個div（包含樣式）並更改尋呼機：'#controller'選項與您的新div ID，那麼它將被放置在該div中。現在，這取決於你如何設計你的div風格以及將它放在你的html中的位置。例如，您可以創建你想要這些數字將出現數

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

將您的DIV一個新的div，然後更改週期插件

pager: '#pagination'

看到的變化，你會得到它。

來源

2012-01-24 02:31:51

你能解釋我你是什麼意思導航，數字波紋管的頁面或菜單欄？ –

JQuery循環插件 - 按鈕

回答

相關問題