如何在兩個或多個幻燈片之間切換？

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/