jQuery Cycle - Как анимировать пейджеры в соответствии с текущим индексом слайд-шоу - PullRequest
Новая
       25

jQuery Cycle - Как анимировать пейджеры в соответствии с текущим индексом слайд-шоу

0 голосов
/ 26 ноября 2011

Вот что у меня есть: У меня 5 скользящих фотографий на странице, а под слайдерами есть пейджеры 1-5.Я хочу показывать только 3 пейджера одновременно, поэтому 4-й и 5-й пейджеры сейчас скрыты.Вы можете нажать кнопку «Далее», чтобы анимировать div, который содержит пейджеры, чтобы показать 4-й и 5-й, нажмите кнопку «Предыдущая» и вы вернетесь, показывая пейджеры 1-3-го.

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

1 Ответ

0 голосов
/ 26 ноября 2011

с веб-сайта цикла 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; }
...