Вот что у меня есть: у меня на странице 5 скользящих фотографий, а под скользящими фотографиями есть пейджеры 1–5. Я хочу отображать только 3 пейджера одновременно, поэтому 4-й и 5-й пейджеры сейчас скрыты. Вы можете нажать кнопку «Далее», чтобы анимировать div, который содержит пейджеры для отображения 4-го и 5-го, нажмите кнопку «Назад», и вы вернетесь с отображением 1–3-го пейджеров.
Вот чего я хочу добиться, но не знаю, как ... Как мне заставить div, содержащий все пейджеры, перемещаться влево, чтобы показывать 4-й и 5-й пейджеры, когда слайд-шоу переходит к 4-й фотографии ?? Это означает, что когда слайд-шоу достигает 4-й фотографии, как мне заставить этот div перемещаться так же, как если бы я нажал кнопку «Далее»? (И когда слайд вернется к 1-й фотографии, пейджеры должны снова переместиться, чтобы снова отобразить 1–3 пейджер.)
Я понятия не имею, какая часть скрипта может сообщить мне, какой слайд активен в данный момент. Если я знаю, думаю, я могу запустить анимацию div, когда активен 4-й ...
<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>
