更确切地说是想制作一个轮播,可以在更多幻灯片之间切换。我按类别对几张图片进行了分组(一组 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 );
});
我还有一个 fiddle here .
最佳答案
我创建了一个可以在 2 个节目之间切换的 fiddle 。 CSS 没有变化,但 HTML 发生了变化,我添加了新的 JS 函数并优化了你的 slideswitch 函数,因为它没有正确找到幻灯片
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 );
});
关于jquery - 如何在两个或多个幻灯片之间切换?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15021377/