jQuery内容旋转器

有人可以推荐一些jQuery插件，用于旋转这个HTML结构。

 
 
Title
 
Text
 
 
 
Title
 
Text
 
 
 
Title
 
Text
 
  

我想，当用户在页面上时，它会在特定时间段内自动旋转，并且用户也可以通过单击箭头左右旋转它。

我试图使用这个http://jquery.malsup.com/cycle/pager11.html ，但我无法让它工作。

问题是，我从PHP代码中动态获取这个HTML ..我不知道，如何分配所需的css（我可以指定所有相同的，但我不能分配不同的Z-index 。

Answer 1

我在10分钟内创建了这个，所以它不是设计师的画廊，但是这个有你需要使用的所有，并了解如何使用左/右按钮创建自己的幻灯片库，自动旋转和hover/暂停。

HTML，CSS，JS代码非常简单，请看一下：

http://jsbin.com/ofukaq/8/edit

HTML：

 
 left right 
 
 
Title1
 
Text1
 
 
 
Title2
 
Text2
 
 
 
Title3
 
Text3
 
 
  

CSS：

 #event_rotator{ width:300px; height:150px; position:relative; overflow:hidden; } #slider{ position:absolute; height:150px; left:0; width:99999px; } .event{ float:left; width:300px; height:150px; background:#eee; } 

最后是jQuery：

 $(function(){ var W = $('#event_rotator').width(); // Gallery Width var N = $('#slider .event').length; // Number of elements var C = 0; // Counter var intv; // Auto anim. Interval if(N<=1){ $('#left, #right').hide(); // hide buttons only 1 element } $('#slider').width( W*N ); // Set slider width $('#left, #right').click(function(){ // Animation logic if(this.id=='right'){ C++; C = C % N; // reset to '0' if end reached }else{ // left was clicked C--; if(C===-1){ // IF C turns -1 scroll to last one (N-1) C = N-1; } } // Animation $('#slider').stop().animate({left: -C*W }, 1000 ); }); // auto rotate function autoRotate(){ intv = setInterval(function(){ $('#right').click(); },2000); // pause time } autoRotate(); // start auto rotate // pause hover $('#event_rotator').on('mouseenter mouseleave', function( e ){ var mEnt = e.type=='mouseenter'; if(mEnt){ clearInterval(intv); }else{ autoRotate(); } }); }); // * end document ready. 

希望我睁开眼睛，有时你不需要一个3000行插件来构建一个具有你需要的所有function的漂亮画廊。

---

这是使用Ternary运算符的一点压缩jQuery脚本：

jsBin演示

 var W = $('#event_rotator').width(), N = $('#slider .event').length, C = 0, intv; if(N<=1)$('#left, #right').hide(); $('#slider').width( W*N ); $('#left, #right').click(function(){ C = (this.id=='right'? ++C : --C) < 0 ? N-1 : C%N ; $('#slider').stop().animate({left: -C*W }, 700 ); }); function auto(){ intv = setInterval(function(){ $('#right').click(); }, 3000 ); } auto(); $('#event_rotator').hover(function( e ){ return e.type=='mouseenter' ? clearInterval(intv) : auto(); }); 

Answer 2

http://jsbin.com/ofukaq/8/edit

如何使这个循环显示如下标题：

Title 1 -> Title 2 -> Title 3 -> Title 1 -> title 2 ->无限循环

代替

 Title 1 -> Title 2 -> Title 3 

？