static/js/top.js

   1 $(function(){
   2         $('.slideshow').each(function(){
   3                 var $container = $(this),
   4                         $slideGroup = $container.find('.slideshow-slides'),
   5                         $slides = $slideGroup.find('.slide'),
   6                         $nav = $container.find('.slideshow-nav'),
   7                         $indicator = $container.find('.slideshow-indicator'),
   8
   9                         slideCount = $slides.length,
  10                         indicatorHTML = '',
  11                         currentIndex = 0,
  12                         duration = 500,
  13                         easing = 'easeInOutExpo',
  14                         interval = 7500,
  15                         timer;
  16
  17
  18                 $slides.each(function(i){
  19                         $(this).css({left:100*i+'%'});
  20                         indicatorHTML += '<a href="#">'+(i+1)+'</a>';
  21                 });
  22
  23                 $indicator.html(indicatorHTML);
  24
  25
  26                 function goToSlide(index){
  27                         $slideGroup.animate({left:-100*index+'%'},duration,easing);
  28                         currentIndex = index;
  29                         updateNav();
  30                 }
  31
  32                 function updateNav(){
  33                         var $navPrev = $nav.find('.prev'),
  34                                 $navNext = $nav.find('.next');
  35                         if (currentIndex === 0){
  36                                 $navPrev.addClass('disabled');
  37                         } else {
  38                                 $navPrev.removeClass('disabled');
  39                         }
  40                         if (currentIndex === slideCount-1){
  41                                 $navNext.addClass('disabled');
  42                         } else {
  43                                 $navNext.removeClass('disabled');
  44                         }
  45                         $indicator.find('a').removeClass('active')
  46                                 .eq(currentIndex).addClass('active');
  47                 }
  48
  49                 function startTimer(){
  50                         timer = setInterval(function(){
  51                                 var nextIndex = (currentIndex+1) % slideCount;
  52                                 goToSlide(nextIndex);
  53                         },interval);
  54                 }
  55
  56                 function stopTimer(){
  57                         clearInterval(timer);
  58                 }
  59
  60
  61
  62                 $nav.on('click','a',function(event){
  63                         event.preventDefault();
  64                         if ($(this).hasClass('prev')){
  65                                 goToSlide(currentIndex-1);
  66                         } else {
  67                                 goToSlide(currentIndex+1);
  68                         }
  69                 });
  70
  71                 $indicator.on('click','a',function(event){
  72                         event.preventDefault();
  73                         if (!$(this).hasClass('active')){
  74                                 goToSlide($(this).index());
  75                         }
  76                 });
  77
  78
  79
  80                 goToSlide(currentIndex);
  81
  82
  83         });
  84
  85 });