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循环插件 - 按钮

回答

相关问题