JQuery ротатор контента

Может кто-нибудь порекомендовать мне какой-нибудь плагин jQuery для вращения этой HTML-структуры.

<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>

Мне бы хотелось, чтобы он вращался автоматически в определенный период времени, когда пользователь находится на странице, а также чтобы этот пользователь мог поворачивать его влево и вправо, щелкая стрелку.

Я пытался использовать этот http://jquery.malsup.com/cycle/pager11.html, но не могу заставить его работать.

Проблема в том, что я получаю этот HTML динамически, из кода PHP... Я не знаю, как назначить необходимый CSS (я могу назначить то же самое для всех, но я не могу назначить другой Z-индекс,

Источник

2 ответа

Решение

Я создал это за 10 минут, так что это не дизайнерская галерея, но в этом есть все, что вам нужно использовать, и УЧИТЕСЬ, как создать собственную галерею слайдов с помощью кнопок влево / вправо, автоповорота и наведения / паузы.

HTML,CSS,JS-код действительно прост, поэтому посмотрите:

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 строк, чтобы создать красивую галерею со всеми необходимыми вам функциями.

Вот немного сжатый скрипт 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();
});
Источник

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

Как сделать так, чтобы цикл показывал заголовки вроде:

Title 1 -> Title 2 -> Title 3 -> Title 1 -> title 2 -> бесконечный цикл

Вместо

Title 1 -> Title 2 -> Title 3

?

Источник
Другие вопросы по тегам