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                 function goToSlide(index){
  26                         $slideGroup.animate({left:-100*index+'%'},duration,easing);
  27                         currentIndex = index;
  28                         updateNav();
  29                 }
  30
  31                 function updateNav(){
  32                         var $navPrev = $nav.find('.prev'),
  33                                 $navNext = $nav.find('.next');
  34                         if (currentIndex === 0){
  35                                 $navPrev.addClass('disabled');
  36                         } else {
  37                                 $navPrev.removeClass('disabled');
  38                         }
  39                         if (currentIndex === slideCount-1){
  40                                 $navNext.addClass('disabled');
  41                         } else {
  42                                 $navNext.removeClass('disabled');
  43                         }
  44                         $indicator.find('a').removeClass('active')
  45                                 .eq(currentIndex).addClass('active');
  46                 }
  47
  48                 $nav.on('click','a',function(event){
  49                         event.preventDefault();
  50                         if ($(this).hasClass('prev')){
  51                                 goToSlide(currentIndex-1);
  52                         } else {
  53                                 goToSlide(currentIndex+1);
  54                         }
  55                 });
  56
  57                 $indicator.on('click','a',function(event){
  58                         event.preventDefault();
  59                         if (!$(this).hasClass('active')){
  60                                 goToSlide($(this).index());
  61                         }
  62                 });
  63
  64                 goToSlide(currentIndex);
  65
  66         });
  67
  68 });