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，但不能分配不同的CSS) Z索引.

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:

$(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屋！