2013-04-15 2 views
-1

Я использую следующий код ниже, чтобы показать большой полноэкранный слайдер. То, что я пытаюсь сделать, заключается в замене функции .click на синхронизированное событие, чтобы каждое изображение менялось через некоторое время (например, 7 секунд), а не при нажатии ссылок.JQuery изменение .click функция автоматического изменения

Работал над этим в течение полудня, и я все еще застрял, поэтому любая помощь, которую вы можете предоставить, была бы очень признательна.

Благодаря

Dave

jQuery(function($){ 
    $(document).ready(function(){ 

    $('.panorama .panorama-view').panorama360(); 
if ($('.panorama #thumbnails .thumbers a').length > 1) { // check if there are multiple panoramas 
    $('.panorama .panorama_controls a').click(function(ev) { 
     ev.preventDefault(); 
     $active = $('.panorama #thumbnails .thumbers a.active'); 
     if ($(this).hasClass('panorama_next')) { 
      if ($active.length == 0) $active = $('.panorama #thumbnails .thumbers a:last'); 
      $next = $active.parent().next('li'); 
      console.log($next); 
      if ($next.length > 0) { // check to see if it's not the first thumb 
       $('a:first',$next).trigger('click'); 
      } else { // load last panorama in the thumb stack 
       $('.panorama #thumbnails .thumbers:first a').trigger('click'); 
      } 
     } 
     else { 
      if ($active.length == 0) $active = $('.panorama #thumbnails a:first'); 
      $prev = $active.parent().prev('li'); 
      if ($prev.length > 0) { // check to see if it's not the first thumb 
       $('a:first',$prev).trigger('click'); 
      } else { // load last panorama in the thumb stack 
       $('.panorama #thumbnails .thumbers:last a').trigger('click'); 
      } 
     } 
    }); 
} else { // you can hide the controls because there is only one panorama loaded 
    $('.panorama .panorama_controls').hide(); 
} 
$('.panorama #thumbnails .thumbers a').click(function(ev) { 
    ev.preventDefault(); 
    if ($(this).hasClass('active')) return; 

    $('.panorama .preloader').show(); 
    $('#thumbnails .thumbers a').removeClass('active'); 
    $(this).addClass('active'); 
    $('.panorama .panorama-view').hide(); 
    $('.panorama .panorama-container').html($(this).next().html()); 
    $('.panorama .panorama-view').panorama360({ sliding_direction: 0 }); 
    $('h1.main-header').html($(this).data("title")); 
    $('.main-desc').html($(this).data("description")); 

}); 
$('.panorama .hotspot').fancybox({ 

     padding  : 0, 
     fitToView : true, 
     mouseWheel : false, 
     maxWidth: '600', 
     minHeight: '400', 

     autoCenter: true, 

     closeClick : false 
}); 

var pictures = [], 

    $thumbnails = $('#thumbnails'); 

    // jScrollPane 

$thumbnails.find('ul').width(function() { 
    var totalWidth = 0; 
    $(this).find('li').each(function() { 
     totalWidth += $(this).outerWidth(true); 
    }); 
    return totalWidth; 
}); 

$thumbnails.jScrollPane(); 

var jScrollPaneApi = $thumbnails.data('jsp'); 

$(window).bind('resize', function() { 
    jScrollPaneApi.reinitialise(); 
}); 

    }); // END doc ready 
    }); // END function 
+0

Ваши селекторы jQuery могут использовать некоторые уточнения. '$ ('. panorama #thumbnails .thumbers a')', почему бы просто не дать ваш '' класс? –

ответ

0

Вместо того, чтобы заменить его, почему бы не просто вызвать функцию щелчка?

setTimeout(function() { 
    $('.panorama .panorama_controls a.panorama_next').click(); 
}, 7000); 
+0

Привет, Дерек, спасибо за ответ. Где бы я поместил эту функцию или заменил бы что-нибудь еще? –

+0

@DaveHassall, просто закрепите его до конца своей функции готовности документа. Не нужно ничего заменять. Все это утверждение говорит браузеру, чтобы он нажимал ссылку каждые 7 секунд. Затем вам не нужно изменять какой-либо исходный код. –

+0

Derek это очень большое спасибо за вашу помощь –

Смежные вопросы