多jQuery的週期尋呼機導航

我在執行的jQuery插件週期創建每個20個圖像畫廊與自己以前的，接下來，和尋呼機導航控件的過程很無需創建和參考3：每個幻燈片新的ID名和避免爲每個幻燈片創建一個單獨的功能。在下面的例子中，我試圖給每個幻燈片播放一個獨特的尋呼機，但沒有有限的成功。我希望有使用。每（）函數寫這個更直觀的方式。在此先感謝任何可以提供幫助的人。多jQuery的週期尋呼機導航

HTML：（我只包括在此例如兩個幻燈片）

<div class="slideshow_container"> 
    <div class="work_slideshow"> 
     <div class="slideshow" id="s1"> 
      <img class="slide" src="images/port/design_unique_1.jpg" /> 
      <img class="slide" src="images/port/design_unique_2.jpg" /> 
      <img class="slide" src="images/port/design_unique_3.jpg" /> 
     </div> 
     <div class="controls"> 
      <img src="images/arrow_left.png" class="prev"/> 
      <img src="images/arrow_right.png" class="next"/> 
     </div> 
     <div class="pager" id="pager1"></div> 
    </div> 

    <div class="work_slideshow"> 
     <div class="slideshow" id="s2"> 
      <img class="slide" src="images/port/design_equality_1.jpg" /> 
      <img class="slide" src="images/port/design_equality_2.jpg" /> 
     </div> 
     <div class="controls"> 
      <img src="images/arrow_left.png" class="prev"/> 
      <img src="images/arrow_right.png" class="next"/> 
     </div> 
     <div class="pager" id="pager2"></div> 
    </div> 
</div>

的jQuery：

$('.slideshow').cycle({ 
    fx: 'fade', 
    easing: 'easeOutExpo', 
    speed:2000, 
    prev:'.prev', 
    next:'.next', 
    timeout:0, 
    pagerAnchorBuilder: function(idx, el) { 
     return '<a href="#" title="Slides"></a>'; 
    }, 
}); 
$('#s1').cycle({ 
pager:'#pager1' 
}); 
$('#s2').cycle({ 
pager:'#pager2' 
});

來源

2012-12-19 negrelja

編輯：未正確讀取的問題。在這裏你去

$('.slideshow').each(function() { 
var pager = $(this).closest('.work_slideshow').find('.pager'); 
$(this).cycle({ 
    fx: 'fade', 
    easing: 'easeOutExpo', 
    speed:2000, 
    timeout:0, 
    pager: pager, 
    pagerAnchorBuilder: function(idx, el) { 
     return '<a href="#" title="Slides"></a>'; 
    }, 
}); 
});

這樣的事情？

對於prev和next，我認爲這將是更有效的手動綁定像這樣的分組和下一個按鈕。

$('.slideshow_container').on('click','.controls .prev',function (e) { 
    e.preventDefault(); 
    $(this).closest('.work_slideshow').find('.slideshow').cycle('prev'); 
}); 

$('.slideshow_container').on('click','.controls .next',function (e) { 
    e.preventDefault(); 
    $(this).closest('.work_slideshow').find('.slideshow').cycle('next'); 
});

基本上對所有下一個/上一個按鈕，一個單一的點擊處理程序，並訪問週期手工插件使用.cycle（「下一頁」）和.cycle（「下一步」）

你甚至可以使收縮它只需一個點擊處理程序，如果你想

$('.slideshow_container').on('click','.controls a',function (e) { 
    e.preventDefault(); 
    if ($(this).hasClass('next') { 
    $(this).closest('.slideshow').cycle('next'); 
    } else { 
    $(this).closest('.slideshow').cycle('prev'); 
    } 
});

來源

2012-12-19 17:54:07 Dogoku

理論上，這正是我所需要的。不幸的是必須有一些稍微偏離，因爲沒有上/下一個按鈕都工作和尋呼機是不可見的。此外，沒有得到任何錯誤，這使得它很難調試。是否有可能在「work_slideshow」類將是與類層次結構的干擾？ – negrelja

我無法獲得一個點擊處理程序示例能夠正常運行。根據所提供的示例，前進和下一個按鈕都被賦予下一個功能。 – negrelja

多jQuery的週期尋呼機導航

回答

相關問題