我們如何才能讓SlidesJS的傳呼機到JQuery Cycle

Question

我想爲我的JQuery Cycle設計一個傳呼機系統。幸運的是，我得到這個從一個JQuery的循環：http://www.malsup.com/jquery/cycle/div.html

現在我想有一個尋呼系統，看起來像http://slidesjs.com/

，我可以添加SlideJS尋呼系統進入一個jQuery週期？如果是，如何？

Answer 1

可能很難「集成」插件，但是您可以輕鬆地使用顯示小圓圈的css（或使用像slidejs這樣的精靈）輕鬆構建頁面錨點並且幾乎完全相同。

我創建了一個演示：

http://jsfiddle.net/lucuma/Mf7Rv/2/

首先，設置一個容器爲整個包。

<div id="sliders"> 
    <div id="slideshow"> 
     <!-- your slides go here whether divs or imgs --> 
    </div> 
    <div id="pager"> 
     <!-- this gets dynamically generated by the plugin's paginate that we'll return a's --> 
    </div> 
    <div id="controller"> 
    <a href="#" class="prev">&lt;</a> <!-- these could be images as well --> 
    <a href="#" class="next">&gt;</a> 
    </div> 
</div> 

下一頁風格尋呼機和像這樣的東西上一頁/下一頁：

#pager {display:inline-block;float:right} 
#pager a {background:#FFF;border:2px solid #333;display:inline-block; 
-webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    width:10px; height:10px; margin-left:2px; 
} 
#pager a.activeSlide {background-color:#333333;border-color:#333333} 
#pager a:hover{background-color:#97201c;border-color:#97201c} 
#controller a {text-decoration:none;color:#333333} 
#controller a.hover {text-decoration:none;color:#97201c} 

最後加載jQuery的週期：

function paginate(idx, slide) { 
    return "<a href='#'></a>" ; 
} 
$('#slideshow').cycle({fx:'scrollHorz', pager: '#pager', 
        pagerAnchorBuilder: paginate, 
        prev: $('.prev'), 
        next: $('.next') 
        });​