2013-01-20 40 views
0

在一個頁面上現在我有這個我的網頁上:我怎麼能有這個jQuery的圖像幻燈片效果多個實例

<section class="image_slider grid_4"> 
<nav class="slider_nav"> <a href="#" class="left">&nbsp;</a> <a href="#" class="right">&nbsp;</a> </nav> 
<div class="slides"> 
    <a href="/images/placeholders/800x600/7.jpg" rel="fancybox_gallery1"><img src="/images/placeholders/300x200/7.jpg" alt="" /></a> 
    <a href="/images/placeholders/800x600/8.jpg" rel="fancybox_gallery1"><img src="/images/placeholders/300x200/8.jpg" alt="" /></a> 
</div> 

控制的JS是這樣的:

/* Sidebar image slider */ 
$('.image_slider').each(function() { 

    /* Functions */ 
    function resetInterval() { 
     clearInterval(imageSliderInterval); 
     imageSliderInterval = setInterval(next, 4000); 
    } 
    function next() { 
     $('.image_slider .slides').children(':last').fadeOut(1000, function() { 
      $(this).prependTo('.image_slider .slides').fadeIn(1); 
     }); 
    } 
    function previous() { 
     $('.image_slider .slides').children(':last').fadeOut(1000, function() { 
      $(this).prependTo('.image_slider .slides').fadeIn(1); 
     }); 
    } 

    /* Initialize */ 
    var imageSliderInterval; 
    resetInterval(); 

    /* Controls */ 
    $('.image_slider .left').click(function() { 
     next(); 
     resetInterval(); 
    }); 
    $('.image_slider .right').click(function() { 
     previous(); 
     resetInterval(); 
    }); 

}); 

任何想法,我可以有多個圖像幻燈片放映實例,每個圖像庫單獨控制?

原始代碼從這個模板來,如果你想看看在肉體 - 向下滾動到標題「南imperdiet lacinia」:

http://travel.equiet.sk/hotel.html

回答

1

以下應隔離實例。這種情況的關鍵是在each循環內使用this定義當前主元素,並在主元素內使用find()將其他元素的搜索本地化爲僅當前實例。

/* Sidebar image slider */ 
$('.image_slider').each(function() { 

    var $slider=$(this), $slides= $slider.find('.slides'), imageSliderInterval; 

    /* Functions */ 
    function resetInterval() { 
     clearInterval(imageSliderInterval); 
     imageSliderInterval = setInterval(next, 4000); 
    } 
    function next() { 
     $slides.children(':last').fadeOut(1000, function() { 
      $(this).prependTo($slides).fadeIn(1); 
     }); 
    } 
    function previous() { 
     $slides.children(':last').fadeOut(1000, function() { 
      $(this).prependTo($slides).fadeIn(1); 
     }); 
    } 

    /* Initialize */ 

    resetInterval(); 

    /* Controls */ 
    $slider.find('.left').click(function() { 
     next(); 
     resetInterval(); 
    }); 
    $slider.find('.right').click(function() { 
     previous(); 
     resetInterval(); 
    }); 

}); 
+0

血腥地獄 - 它第一次工作,效果很好!不夠感謝你。整個晚上頭部劃傷避免!隊友的歡呼聲。 James –

+0

記住這個模式...對於多個小部件實例非常常見......很好解決它 – charlietfl