Циклы Div и миниатюры - PullRequest
Новая
       44

Циклы Div и миниатюры

3 голосов
/ 23 января 2012

Я надеюсь, что кто-то может спасти меня! Я пытаюсь создать (надеюсь) простой вращающийся баннер для моей страницы. У меня есть 7 div, которые содержат фотографии и текст, они следующие: 

<div id="content-1">Sample text</div>
<div id="content-2">Sample text</div>
<div id="content-3">Sample text</div>
<div id="content-4">Sample text</div>
<div id="content-5">Sample text</div>
<div id="content-6">Sample text</div>
<div id="content-7">Sample text</div>

И ниже этих div у меня есть 7 соответствующих div, которые являются миниатюрами: 

<div id="thumb-content-1">Sample text</div>
<div id="thumb-content-2">Sample text</div>
<div id="thumb-content-3">Sample text</div>
<div id="thumb-content-4">Sample text</div>
<div id="thumb-content-5">Sample text</div>
<div id="thumb-content-6">Sample text</div>
<div id="thumb-content-7">Sample text</div>

Я бы хотел сделать несколько вещей:

1) Каждые 5 секунд циклически перебираются новые div (поэтому «content-1» будет отображаться в течение 5 секунд, затем «content 2» и т. Д.)

2) Применить класс к текущей миниатюре, называемой «cr-ротатор» У меня уже настроен стиль.

3) Я хотел бы иметь возможность приостановить его вращение, когда пользователь наводит курсор на основной div или эскиз thumb.

4) Наконец, мне бы хотелось, чтобы при наведении курсора на миниатюру это изменило основной контент, а затем продолжайте цикл, когда вы выключите мышь. Скажем, например, что вы наведете курсор на «thumb-content-3», он сделает div «content-3» видимым, а затем, когда вы наведете курсор мыши, он продолжит цикл.

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

var divs = $('div[id^="content-"]').hide(),
    i = 0;

(function cycle() { 
    divs.eq(i).fadeIn(200)
              .delay(3000)
              .fadeOut(200, cycle);

    i = ++i % divs.length; // increment i, 
                           //   and reset to 0 when it equals divs.length
})();

Большое спасибо всем, кто может мне помочь.

Ответы [ 2 ]

5 голосов
/ 23 января 2012

Затухание ротатора - Демонстрация на jsBin 

<div id="rotator">

  <div id="slides">
    <div>Sample text 1</div>
    <div>Sample text 2</div>
    <div>Sample text 3</div>
  </div>

  <div id="thumbs">
    <div>1</div>
    <div>2</div>
    <div>3</div>   
  </div>

</div>
  • Автоматическое затухание
  • Пауза при наведении
  • При наведении пальца вызывает основнойслайд
  • Перезапустите, где остановился

И код JQ: 

var $el = $('#fader'),

//  SETUP  ////////
    F = 600 ,    // Fade Time
    P = 2000 ,   // Pause Time
    C = 0 ,      // Counter / Start Slide# (0 based)
///////////////////

    $sl = $('#slides > div'),
    $th = $('#thumbs > div'),
    N = $sl.length,
    T = null;

$sl.hide().eq(C).show();
$th.eq(C).addClass('on');

// ANIMATION
function anim() { 
  $sl.eq(C%N).stop(1).fadeTo(F,1).siblings().fadeTo(F,0);
  $th.removeClass('on').eq(C%N).addClass('on');
}

// AUTO ANIMATE     
function autoAnim() {   
   T = setTimeout(function() {
      C++;
      anim();     // Animate
      autoAnim(); // Prepare another iteration
   }, P+F);
}
autoAnim();      // Start loop

// HOVER PAUSE
$el.hover(function(e) {
   return e.type==='mouseenter'? clearTimeout( T ) : autoAnim();
});

// HOVER THUMBNAILS
$th.on('mouseenter', function() {
   C = $th.index( this );
   anim();
});
0 голосов
/ 23 января 2012

Самый простой способ реализовать желаемую функциональность - использовать Cycle Plugin от Malsup. Перейдите на http://jquery.malsup.com/cycle/ и загрузите скрипт, затем посмотрите на хорошо документированные демонстрации, которые он предоставил. Использование Cycle дает вам возможность воспользоваться множеством различных опций, которые позволят вам навсегда передать код.

...