плагин цикла jquery, вложенное слайд-шоу, опция 'after' или проверка первого и последнего изображения - PullRequest
Новая
       45

плагин цикла jquery, вложенное слайд-шоу, опция 'after' или проверка первого и последнего изображения

2 голосов
/ 16 июня 2011

В моих вложенных слайд-шоу у меня есть элементы управления «предыдущий» и «следующий». Я хотел бы иметь возможность уменьшить непрозрачность CSS «prev», если вы находитесь на первом слайде, и «next», если вы находитесь на последнем слайде.

Опция 'after: onAfter' была бы достаточной, но она не работала, когда помещалась в мой код для вложенных элементов управления слайд-шоу.

Есть ли способ правильно реализовать «после» во вложенном слайд-шоу или, альтернативно, проверить наличие первого и последнего изображений во вложенном слайд-шоу? Thankyou

Вот мой код. 

    <!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" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function() {                     
// init and stop the inner slideshows
var inners = $('.inner-slideshow').cycle().cycle('stop');
var slideshow = $('#slideshow').cycle({
    fx:     'fade',
    speed:  'fast',
    timeout: 0,
    pager:  '#nav',
    pagerAnchorBuilder: function(idx, slide) {
        // return sel string for existing anchor
        return '#nav li:eq(' + (idx) + ') a';
    },
    before: function() {
        // stop all inner slideshows
        inners.cycle('stop');
        // start the new slide's slideshow
        $(this).cycle({
            fx: 'scrollHorz',
            speed:  'fast',
            timeout: 0,
            prev: '#prev',
            next: '#next',
            nowrap:  1
        });
    }
});
});
</script>
<title>dev</title>
</head>
<body>
<ul id="nav">
<li><a href="#">Top Slidehsow 1</a></li>
<li><a href="#">Top Slidehsow 2</a></li>
</ul>
<div id="controls">
    <a id="prev" href="#">&lt; Prev</a>
    <a id="next" href="#">Next &gt;</a>
</div>
<div id="slideshow">
    <div class="inner-slideshow">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200">
    </div>
    <div class="inner-slideshow">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200">
        <img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="200" height="200">
    </div>
</div>
</body>
</html>

Ответы [ 2 ]

2 голосов
/ 16 января 2012

Я думаю, это то, что вы хотели (отредактировал ваш пример): http://jsfiddle.net/m8AFG/18/

$(document).ready(function() {
    // init and stop the inner slideshows
    var inners = $('.inner-slideshow').cycle().cycle('stop');
    var slideshow = $('#slideshow').cycle({
        fx: 'fade',
        speed: 'fast',
        timeout: 0,
        pager: '#nav',
        pagerAnchorBuilder: function(idx, slide) {
            // return sel string for existing anchor
            return '#nav li:eq(' + (idx) + ') a';
        },
        before: function() {
            // stop all inner slideshows
            inners.cycle('stop');
            // start the new slide's slideshow
            $(this).cycle({
                fx: 'scrollHorz',
                speed: 'fast',
                timeout: 0,
                prev: '#prev',
                next: '#next',
                nowrap: 1,
                after: function() {
                    $('#prev').removeClass('opac');
                    $('#next').removeClass('opac');
                    var countImg = $(this).siblings().size();
                    if ($(this).index() == 0) $('#prev').addClass('opac');
                    if ($(this).index() == countImg) $('#next').addClass('opac');
                }
            });
        }
    });
});

добавлена ​​прозрачность CSS и ссылка на скрипт jquery и цикла, и она отлично работает

Привет, Майкл

0 голосов
/ 16 июня 2011

Было бы полезно узнать, какой плагин вы используете, но большинство плагинов слайдера имеют параметр, к которому вы можете добавить функцию, которая будет вызываться каждый раз, когда происходит фактическое скольжение, что-то вроде 'onChange'. Если у этого плагина есть такая особенность, вы можете использовать простой Javascript, чтобы либо напрямую манипулировать CSS или элементами, либо добавить к ним класс, чтобы позволить вам манипулировать ими в вашем CSS.

Так что вам нужно знать текущий индекс - похоже, что 'idx' может это обеспечить, и тогда вы сделаете что-то вроде (псевдокод) 

if(currentSlideNumber == slides.length){ 
    //Reduce opacity of next tab
}else if(currentSlideNumber == 1){
    //Reduce opacity of previous tab
}

Где 'currentSlideNumber' - текущий индекс, а slides.length подсчитывает количество слайдов - в Javascript это будет: 

$('.inner-slideshow').children('img').length
...