Jquery 如何在两个或多个幻灯片之间切换？

更确切地说，我们想制作一个旋转木马，在更多的幻灯片之间切换。我按一个类将几个图像分组（一组包含3个图像的类project1，一组包含另外3个图像的类project2等）。在我的旋转木马中，一个组进行自动幻灯片放映，但当我单击“下一步/上一步”按钮时，我希望在同一容器中更改显示的组。 例如，我有一组狮子图像，它们一个接一个地移动，当我单击“下一步”时，我希望它们在一组猫的照片中发生变化。只是一个粗略的描述，以便更好地理解它

我现在的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 );
});

---

我还有一把小提琴，也就是说。

我制作了一把小提琴，可以在两个节目之间切换。CSS没有改变，但是HTML有了变化，我添加了新的JS函数，并优化了slideswitch函数，因为它没有正确地找到幻灯片

HTML更改（添加onclick事件）

BN

JS

//当前项目和我们拥有的项目总数
var项目=1，项目=1；
功能更改显示（方向）
{
//基于方向更改项目
如果（方向==‘返回’）{
//检查上一个项目是否存在，否则使用最后一个，因为我们会循环
项目=（项目-1>0）？（项目-1）：项目；
}否则{
//检查我们没有超过我们的项目数量，否则循环
项目=（项目+1个项目）{
//更新项目计数
项目=当前；
}
});
}
函数幻灯片（）
{    
变量$active=$（'.project'+project+'.active'）；
如果（$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（“活动”）
.animate（{opacity:1.0}，1000，function（））{
$active.removeClass（'active last active'）；
});
}
$（文档）.ready（函数（）
{
//了解我们有多少项目
getProjects（）；
//开始幻灯片放映
设置间隔（幻灯片放映，2000年）；
});

---

小提琴：

我创建了一个小提琴，可以在两个节目之间切换。CSS没有改变，但是HTML有了变化，我添加了新的JS函数，并优化了slideswitch函数，因为它没有正确地找到幻灯片

HTML更改（添加onclick事件）

BN

JS

//当前项目和我们拥有的项目总数
var项目=1，项目=1；
功能更改显示（方向）
{
//基于方向更改项目
如果（方向==‘返回’）{
//检查上一个项目是否存在，否则使用最后一个，因为我们会循环
项目=（项目-1>0）？（项目-1）：项目；
}否则{
//检查我们没有超过我们的项目数量，否则循环
项目=（项目+1个项目）{
//更新项目计数
项目=当前；
}
});
}
函数幻灯片（）
{    
变量$active=$（'.project'+project+'.active'）；
如果（$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（“活动”）
.animate（{opacity:1.0}，1000，function（））{
$active.removeClass（'active last active'）；
});
}
$（文档）.ready（函数（）
{
//了解我们有多少项目
getProjects（）；
//开始幻灯片放映
设置间隔（幻灯片放映，2000年）；
});

---

Fiddle:

在这里使用循环缓冲区可能是个好主意。在这里使用循环缓冲区可能是个好主意。棒极了，快到了。既然您已经熟悉了代码，那么有没有办法进行更平滑的转换？在放映之间或幻灯片之间进行更平滑的转换？你希望它有什么样的表现？在表演之间。我尝试了n个动画，但《溢出：隐藏和边界半径》在opera和IE中似乎并不一致：|更高效、更直观的是在不同的节目之间进行转换。如果你有一个想法，这将是完美的，但thx为你的贡献，即使如此：）最可靠的动画betwen项目将是下一个项目从中心增长。我现在正在自己尝试。但是任何建议都是受欢迎的：）我已经更新了它，所以新的项目可以顺利进行。这是我能做的最好的了，不是一个真正的jQuery动画师太棒了。既然您已经熟悉了代码，那么有没有办法进行更平滑的转换？在放映之间或幻灯片之间进行更平滑的转换？你希望它有什么样的表现？在表演之间。我尝试了n个动画，但《溢出：隐藏和边界半径》在opera和IE中似乎并不一致：|更高效、更直观的是在不同的节目之间进行转换。如果你有一个想法，这将是完美的，但thx为你的贡献，即使如此：）最可靠的动画betwen项目将是下一个项目从中心增长。我现在正在自己尝试。但是任何建议都是受欢迎的：）我已经更新了它，所以新的项目可以顺利进行。这是我能做的最好的了，并不是一个真正的jQuery动画制作者

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

// 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 );
});