JQuery thumbnail src ротатор при наведении (несколько изображений) - PullRequest
Новая
       7

JQuery thumbnail src ротатор при наведении (несколько изображений)

1 голос
/ 02 октября 2010

Ситуация: У нас есть этот DIV с миниатюрами, которым необходимо изменить их Src при наведении курсора: 

<div id="moreVideos">
<span class="mb">
    <a href="#" onclick="javascript:loadAndPlayVideo('qrO4YZeyl0I');return false;" class="ml">
        <img src="http://i.ytimg.com/vi/qrO4YZeyl0I/default.jpg" id="thumb_qrO4YZeyl0I" class="mvThumb" title="Lady Gaga - Bad Romance">
    </a
</span>
<span class="mb">
    <a class="ml" onclick="javascript:loadAndPlayVideo('niqrrmev4mA');return false;" href="#">
        <img title="Lady Gaga - Alejandro" class="mvThumb" id="thumb_niqrrmev4mA" src="http://i.ytimg.com/vi/niqrrmev4mA/default.jpg">
    </a>
</span>
<span class="mb">
    <a href="#" onclick="javascript:loadAndPlayVideo('qrO4YZeyl0I');return false;" class="ml">
        <img src="http://i.ytimg.com/vi/qrO4YZeyl0I/default.jpg" id="thumb_qrO4YZeyl0I" class="mvThumb" title="Lady Gaga - Bad Romance">
    </a
</span>
<span class="mb">
    <a class="ml" onclick="javascript:loadAndPlayVideo('niqrrmev4mA');return false;" href="#">
        <img title="Lady Gaga - Alejandro" class="mvThumb" id="thumb_niqrrmev4mA" src="http://i.ytimg.com/vi/niqrrmev4mA/default.jpg">
    </a>
</span>

Проблема: При наведении миниатюры нам нужно каждые 2 секунды менять миниатюру src с default.jpg -> 1.jpg -> 2.jpg -> 3.jpg -> default.jpg (проходить по ним, пока мышь наводит на большой палец,после отключения мыши нужно остановиться и остаться на текущем изображении)

Что я пробовал: Множество примеров кодов с других веб-сайтов и плагин цикла JQuery.Попытка использовать это решение не удалась: jquery непрерывная анимация при наведении мыши

Будет использоваться: http://ListAndPlay.com

Мне очень любопытнокак бы вы решили такую ​​проблему:)!

Ответы [ 2 ]

9 голосов
/ 02 октября 2010

Попробуйте это ( demo ) ... Я также извлек внутренний вызов loadAndPlayVideo: 

$(document).ready(function(){

 $('a.ml').click(function(){
  loadAndPlayVideo( $(this).find('img').attr('id').replace(/thumb_/,'') );
  return false;
 });

 var timer,
  count = 0,
  cycle = function(el){
    var s = el.attr('src'),
     root = s.substring( 0, s.lastIndexOf('/') + 1 );
    count = (count+1)%4;
    el.attr('src', root + ((count===0) ? 'default' : count) + '.jpg');
 };

 $('.mb img').hover(function(){
   var $this = $(this);
   cycle($this);
   timer = setInterval(function(){ cycle($this); }, 1000);
 }, function(){
   clearInterval(timer);
 });

});

HTML 

<!-- changed the "moreVideos" id to class, assuming you'll have more than one block -->
<div class="moreVideos"> 
<span class="mb">
    <a class="ml" href="#">
        <img src="http://i.ytimg.com/vi/qrO4YZeyl0I/default.jpg" id="thumb_qrO4YZeyl0I" class="mvThumb" title="Lady Gaga - Bad Romance">
    </a
</span>
<span class="mb">
    <a class="ml" href="#">
        <img title="Lady Gaga - Alejandro" class="mvThumb" id="thumb_niqrrmev4mA" src="http://i.ytimg.com/vi/niqrrmev4mA/default.jpg">
    </a>
</span>
<span class="mb">
    <a class="ml" href="#">
        <img src="http://i.ytimg.com/vi/qrO4YZeyl0I/default.jpg" id="thumb_qrO4YZeyl0I" class="mvThumb" title="Lady Gaga - Bad Romance">
    </a
</span>
<span class="mb">
    <a class="ml" href="#">
        <img title="Lady Gaga - Alejandro" class="mvThumb" id="thumb_niqrrmev4mA" src="http://i.ytimg.com/vi/niqrrmev4mA/default.jpg">
    </a>
</span>

Обновление : чтобы иметь переменное число превью для каждого изображения, я обновил демо , также позволяя добавить атрибут data-thumbs, содержащий либо имя файла (если все превью используют одно и то жекорневой URL-адрес) или полные URL-адреса для каждого большого пальца. 

<img src="http://i.ytimg.com/vi/qrO4YZeyl0I/default.jpg" data-thumbs="default.jpg, 1.jpg, http://i.ytimg.com/vi/qrO4YZeyl0I/2.jpg, 3.jpg" id="thumb_qrO4YZeyl0I" class="mvThumb" title="Lady Gaga - Bad Romance">

Например, приведенное выше изображение будет работать только в том случае, если URL-адрес большого пальца «2.jpg» имеет тот же корень (http://i.ytimg.com/vi/qrO4YZeyl0I/), что и используемыйв атрибуте "src", потому что код изменяет URL отображаемого в данный момент URL.Для изображений в разных местах используйте полный URL для каждого большого пальца в атрибуте data-thumbs. 

$(function() {

  $('a.ml').click(function() {
    loadAndPlayVideo($(this).find('img').attr('id').replace(/thumb_/, ''));
    return false;
  });

  var timer;

  function cycle(el) {
    var s = el.attr('src'),
      root = s.substring(0, s.lastIndexOf('/') + 1),
      files = el.attr('data-thumbs').split(/\s*,\s*/),
      count = parseInt(el.attr('data-count'), 10) || 0;
    count = (count + 1) % files.length;
    el.attr({
      'src': files[count].indexOf('http') > -1 ? files[count] : root + files[count],
      'data-count': count
    });
  }

  $('.mb img').hover(function() {
    var $this = $(this);
    cycle($this);
    timer = setInterval(function() {
      cycle($this);
    }, 1000);
  }, function() {
    clearInterval(timer);
  });

});
1 голос
/ 09 февраля 2014

Я не хочу начинать совершенно новый вопрос, и мне нужно скопировать код Mottie в этом вопросе, чтобы задать его. Опубликованный ответ отлично работает, и мой единственный вопрос - как его изменить, чтобы разрешить переменное число миниатюр.

В приведенном примере показаны циклы из default.jpg -> 1.jpg -> 2.jpg -> 3.jpg -> default.jpg, что замечательно, если в каждом каталоге миниатюр есть только четыре изображения. Но что, если для каждой из ссылок src изображения имеется разное количество превью? Например, что, если первое изображение имеет 6 пальцев, второе изображение имеет 8 пальцев, а третье изображение имеет 11 пальцев. В чем секрет того, что коду не нужно обращать внимание, сколько пальцев находится в каталоге изображений, чтобы он просматривал их все независимо от количества пальцев?

...