JQuery循环插件-按钮_Jquery_Plugins_Cycle

JQuery循环插件-按钮

jquery plugins

JQuery循环插件-按钮,jquery,plugins,cycle,Jquery,Plugins,Cycle,我不熟悉JQuery。我正在使用JQuery cycle插件创建一个功能框。问题是，我不知道如何将那些1,2,3,4导航替换为我的“可点击”块按钮您可以复制并粘贴所有代码以从此链接运行：如果有人能帮上忙，我真的很感激非常感谢代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

我不熟悉JQuery。我正在使用JQuery cycle插件创建一个功能框。问题是，我不知道如何将那些1,2,3,4导航替换为我的“可点击”块按钮

您可以复制并粘贴所有代码以从此链接运行：

如果有人能帮上忙，我真的很感激非常感谢

代码如下：

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


测试
$（文档）.ready（函数（）{
var parentLI=$（this.parent（'li'）；
var控制器=$（此）；
var$featured_content=$（“#幻灯片放映”）；
如果（$content.length）{
$（'#幻灯片放映'）。循环（{
超时：0，
速度:500,，
没错，
cleartype:true，
寻呼机：“#控制器”，
外汇：“淡出”，
}); 
}
$（'.controller'）。单击（函数（事件）{
var parentLI=$（this.parent（'li'）；
var控制器=$（此）；
//可点击
if（parentLI.hasClass（'active'））{
返回false；
}
$（'.active'）.removeClass（'active'）；
parentLI.addClass（“活动”）；
event.preventDefault（）；
});
});
ol，ul{列表样式：无；
}
#幻灯片放映{
浮动：左；
宽度：962px；
高度：308px；
边框底部：#000 1px实心；
}
#滑梯{
浮动：左；
宽度：962px；
高度：308px；
背景：#FFF；
}
.imags1{
背景：绿色；
不重复；
高度：290px；
保证金：20px自动；
}
.imags2{
背景：红色；
不重复；
高度：290px；
保证金：20px自动；
}
.imags3{
背景：黄色；
不重复；
高度：290px；
保证金：20px自动；
}
.imags4{
背景：紫色；
不重复；
高度：290px；
保证金：20px自动；
}
#控制器{
浮动：左；
宽度：962px；
高度：179px；
边框顶部：1px实心#000；
}
.控制员{
字体大小：11px；
;
}
#控制器h3{
字体大小：13px；
字体大小：粗体；
}
#控制器。激活h1{
颜色：#DD9A40；
}
#控制器ul{
填充：0；
保证金：0；
}
#控制器li.active{
背景#6690c5；
}
#控制器ulli{
浮动：左；
光标：指针；
}
#控制器ulli.控制器{
浮动：左；
宽度：191px；
高度：160px；
填充：20px24px0；
左边框：1px实心#000；
}


你好1


你好2


你好3


你好4

在你的cycle插件中，你有一个选项页面：“#controller”，它告诉插件在你的controller div中插入页码/数字。如果你创建了另一个div（使用样式）在您的页面中，使用新的div id更改寻呼机：“#controller”选项，然后它将被放置在该div中。现在它取决于您如何设置div的样式以及将其放置在html中的位置。例如，您可以为数字创建一个新div

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

看到更改，你就会得到它。

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

看到变化，你就会明白。

你能解释一下页面或菜单栏下面的数字是什么意思吗？你能解释一下页面或菜单栏下面的数字是什么意思吗？