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

Question

更确切的是想要制作一个在更多幻灯片之间变化的旋转木马。我按类分组了几个图像（一组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); 
}); 

我也有一个小提琴是here。

Answer 1

我创建了一个在2个节目之间切换的小提琴。该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); 
}); 

小提琴：http://jsfiddle.net/sjdaws/4QcYE/