以下是我所拥有的：我在页面上有5张滑动照片，滑动照片下面有寻呼机1-5。我想一次只显示3个寻呼机，所以第4个和第5个寻呼机现在是隐藏的。您可以点击"下一步"按钮来动画包含寻呼机的div，以显示第4个和第5个，点击"上一步"，然后返回显示第1-3个寻呼机。
以下是我想要实现的目标，但不知道如何实现当幻灯片放映到第4张照片时，我如何使包含所有寻呼机的div向左移动以显示第4和第5个寻呼机？？这意味着当幻灯片播放到第4张照片时，我如何让div像点击"下一步"按钮一样移动？？(当幻灯片回到第一张照片时，寻呼机应该会再次移动，这样它就会再次显示第1-3个寻呼机。(
我不知道脚本的哪一部分可以让我知道哪张幻灯片当前处于活动状态。如果我知道的话，我想我可以在第四个激活时触发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循环插件网站：
当使用寻呼机选项时，生成的导航元素只是锚点。所以如果你将寻呼机选项设置为：寻呼机：'#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; }