jQuery Cycle-如何根据当前的幻灯片索引为寻呼机设置动画答案

【问题标题】：jQuery Cycle- How to animate pagers according to the current slideshow indexjQuery Cycle-如何根据当前的幻灯片索引为寻呼机设置动画
【发布时间】：2011-11-26 01:07:00
【问题描述】：

这是我所拥有的： 我在页面上有5张滑动照片，滑动照片下方有1-5个寻呼机。我想一次只显示 3 个寻呼机，所以现在隐藏第 4 和第 5 个寻呼机。您可以单击“下一步”按钮为包含寻呼机的 div 设置动画以显示第 4 个和第 5 个，单击“上一个”按钮，然后返回显示第 1-3 个寻呼机。

这是我想要实现但不知道如何实现的目标...... 当幻灯片滑到第 4 张照片时，如何使包含所有寻呼机的 div 向左移动以显示第 4 和第 5 寻呼机？意思是当幻灯片播放到第四张照片时，我如何使该 div 像单击“下一步”按钮一样移动？（当幻灯片回到第一张照片时，寻呼机应该再次移动，以便再次显示第 1-3 张寻呼机。）

我不知道脚本的哪一部分可以让我知道哪张幻灯片当前处于活动状态。如果我知道，我想我可以在第 4 个活动时触发 div 的动画...

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cycle Test</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(function() {
    $('#slideshow').cycle({
        fx:     'turnDown',
        speed:  'fast',
        pager:  '#nav',
        pagerAnchorBuilder: function(idx, slide) {
            // return sel string for existing anchor
            return '#nav li:eq(' + (idx) + ') a';
        }
    });
});

</script>
<script type="text/javascript">
$(document).ready(function() {
    $('#next_control').click(function() {
        var c = $('#nav_content');
        var pos = c.position();
        var w = c.width();
        var status = w + pos.left;
        var dif = w - 190;
        var x = w + dif;
        if (status > 190) {
            c.stop().animate({
                left: pos.left - 180
            }, 500)
        };
    });
});

$(document).ready(function() {
    $('#prev_control').click(function() {
        var c = $('#nav_content');
        var pos = c.position();
        if (pos.left < 0) {
            c.stop().animate({
                left: pos.left + 180
            }, 500)
        };
    });
});
</script>
<style type="text/css">
<!--

* {
    margin: 0px;
    padding: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
}
 #slideshow {
    overflow: hidden;
    position: relative;
    height: 200px;
    width: 200px;
}
#bot {
    background-color: #CCC;
    height: 50px;
    width: 290px;
    margin-top: 10px;
    position: relative;
}
#nav_content #nav li {
    list-style-type: none;
    float: left;
    height:50px;
    width: 50px;
    margin-left: 10px;
}


#bot #nav_wrapper {
    background-color: #FFF;
    float: left;
    height: 50px;
    width: 190px;
    overflow: hidden;
    position: relative;
}
#bot #previous {
    float: left;
    height: 50px;
    width: 50px;
}
#bot #next {
    float: right;
    height: 50px;
    width: 50px;
}
#bot #nav_wrapper #nav_content {
    height: 50px;
    width: 310px;
    position: absolute;
    left: 0px;
    top: 0px;
}
-->
</style>
</head>

<body>
<div id="slideshow">
<img src="img/beach1.jpg" />
<img src="img/beach2.jpg" />
<img src="img/beach3.jpg" />
<img src="img/beach4.jpg" />
<img src="img/beach5.jpg" />
</div>

<div id="bot">
<div id="previous"><a id="prev_control" href="#">Prev</a></div>
<div id="nav_wrapper">
<div id="nav_content"> 
  <ul id="nav">
      <li><a href="#"><img src="img/beach1.jpg" width="50" height="50" /></a></li>
      <li><a href="#"><img src="img/beach2.jpg" width="50" height="50" /></a></li>
      <li><a href="#"><img src="img/beach3.jpg" width="50" height="50" /></a></li>
      <li><a href="#"><img src="img/beach4.jpg" width="50" height="50" /></a></li>
      <li><a href="#"><img src="img/beach5.jpg" width="50" height="50" /></a></li>
  </ul>
</div>
</div>
<div id="next"><a id="next_control" href="#">Next</a></div>
</div>
</body>
</html>

【问题讨论】：

标签： jquery plugins indexing cycle pager

【解决方案1】：

来自 jQuery 循环插件网站：

使用分页器选项时，生成的导航元素只是锚点。所以如果你像这样设置寻呼机选项：寻呼机：'#nav' 您可以像这样设置锚点的样式：

#nav a { background-color: #fc0 }

此外，活动幻灯片的导航元素被赋予了 activeSlide 类，因此它可以具有独特的样式。

上例中的寻呼机样式如下：

#nav a { border: 1px solid #ccc; background: #fc0; text-decoration: none; margin: 0 5px; padding: 3px 5px;  }
#nav a.activeSlide { background: #ea0 }
#nav a:focus { outline: none; }

【讨论】：