1

より正確なのは、より多くのスライドショー間で変化するカルーセルを作成することです。クラスごとにいくつかの画像をグループ化しました（クラスproject1の3つの画像のグループ、クラスproject2の別の3つの画像のグループなど）。私のカルーセルでは、1つのグループが自動スライドショーを作成しますが、[次へ/戻る]ボタンをクリックすると、同じコンテナー内で表示されるグループを変更する必要があります。例として、ライオンの画像が次々と表示されるグループがあり、[次へ]をクリックすると、たとえば猫の写真のグループでそれらを変更したいと思います。それをよりよく理解するための大まかな説明です。

今のところ私のJquery：

function slideswitch() {
    var $active = $("#project img.project1.active");
    $active.hide();
    if ( $active.length == 0 ) $active = $('#project IMG.project1:last');

    var $next =  $active.next(":has(.project1)").length ? $active.next()
        : $('#project IMG.project1:first');

    $active.addClass('last-active').show();

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
};
$(document).ready(function() {
    setInterval(slideswitch, 2000 );
});

私もここにあるフィドルを持っています。

4

1 に答える 1

1

2つのショーを切り替えるフィドルを作成しました。CSSは変更されていませんが、HTMLに変更があり、新しいJS関数を追加し、スライドが正しく検出されなかったため、スライドスイッチ関数を最適化しました。

HTMLの変更（onclickイベントの追加）

<div id="back" onclick="changeShow('back');">B</div><div id="next" onclick="changeShow('next');">N</div>

JS

// current project and total amount of projects we have
var project = 1, projects = 1;

function changeShow(direction)
{
    // change project based on direction
    if (direction == 'back') {
        // check if previous project exists, otherwise use last as we would've cycled
        project = (project - 1 > 0) ? (project - 1) : projects;
    } else {
        // check we aren't exceeding the number of projects we have, otherwise loop
        project = (project + 1 <= projects) ? (project + 1) : 1;
    }

    // remove any active images from the old project
    $('#project img').removeClass('active last-active');

    // force slide change
    slideShow();
}

function getProjects()
{
    // find the largest project assuming they will be sequential - project1, project2, projectX..
    $('img[class^="project"]').each(function(){
        var current = parseInt($(this).attr('class').replace('project', ''), 10);
        if (current > projects) {
            // update projects count
            projects = current;
        }
    });
}


function slideShow()
{    
    var $active = $('.project' + project + '.active');
    if ($active.length == 0) $active = $('.project' + project + ':last');
    var $next = $active.next('.project' + project).length ? $active.next() : $('.project' + project + ':first');
    $active.addClass('last-active').show();
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(document).ready(function()
{
    // find out how many projects we have
    getProjects();
    // start slide show
    setInterval(slideShow, 2000 );
});

フィドル： http： //jsfiddle.net/sjdaws/4QcYE/

于 2013-02-25T13:36:48.303 に答える