jQuery 内容旋转器 [英] jQuery content rotator

问题描述

谁能推荐我一些 jQuery 插件，用于旋转这个 HTML 结构.

Can someone recommend me some jQuery plugin, for the rotating this HTML structure.

<div id="event_rotator">
 <div class="event">
 <h2>Title</h2>
 <p>Text</p>
 </div>
 <div class="event">
 <h2>Title</h2>
 <p>Text</p>
 </div>
 <div class="event">
 <h2>Title</h2>
 <p>Text</p>
 </div>
</div>

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

I would like, that it would rotate the automatically in the certain time period, when the user is on the page, and also that user can rotate it left and right with a click on an arrow.

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

I tried to use this http://jquery.malsup.com/cycle/pager11.html , but I cannot get it to work.

问题是，我从 PHP 代码中动态获取了这个 HTML.我不知道如何分配所需的 css(我可以分配对所有人都相同的 css，但我不能分配不同的 cssZ 索引.

The problem is, that I get this HTML dynamically, out of a PHP code.. I don't know, how to assign the needed css (I can assign that which is the same for all, but I cannot assign different Z-index.

推荐答案

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

I created this in 10 min, so it's not a designer's gallery, but this one has all you need to use and LEARN how to create your self a slide gallery with left/right buttons, auto-rotate and hover/pause.

HTML,CSS,JS代码很简单，看一下吧:

The HTML,CSS,JS code is really simple so take a look:

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

HTML:

<div id="event_rotator">

  <button id="left">left</button>
  <button id="right">right</button>  

  <div id="slider">
   
     <div class="event">
     <h2>Title1</h2>
     <p>Text1</p>
     </div>
     <div class="event">
     <h2>Title2</h2>
     <p>Text2</p>
     </div>
     <div class="event">
     <h2>Title3</h2>
     <p>Text3</p>
     </div>
   
  </div>
  
</div>

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:

and finally 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 行的插件来构建一个具有您需要的所有功能的漂亮画廊.

Hope I opened your eyes that sometimes you don't need a 3000 lines plugin to build a nice gallery with all the functionality you need.

这里是使用 三元运算符的稍微压缩的 jQuery 脚本:

Here is with a bit compressed jQuery script using Ternary operators:

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();
});

这篇关于jQuery 内容旋转器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！