jQuery开发左右切换焦点图实现方法

演示图：

代码：

$(document).ready(function() {   
  greyinitredux();
  iedropdownsnav();
  iedropdownsfilter();
  itemviewer();
  jstabsetinit();
  slider();
  headertabs();
  carousel();
  emergencyclose();
  replylinks();
  adjournlinks();
  zebra_strip_rows();
  visitor_site_slideshow();
 });
 
var carousel_round = 0;
 
/*-------------------------------------------
  grey initial values
-------------------------------------------*/
function greyinitredux() {
  $("input.filled, textarea.filled").focus(function(e){
    if(this.value == this.defaultvalue)
    {
      $(this).removeclass('filled');
       this.value= '';
    }
    $(this).blur(function(f){ 
      if(this.value == this.defaultvalue) {
        $(this).addclass('filled');
        } else if(this.value == "") {
          this.value = this.defaultvalue;
          $(this).addclass('filled');
        }
      });
  })
 
}
   
/*-------------------------------------------
  ie6 css main nav dropdowns
-------------------------------------------*/
function iedropdownsnav() {
  if(document.all&&document.getelementbyid) 
  {
    navroot = document.getelementbyid('main-nav');
    if (!navroot) { return false; }
     
    for(i=0; i<navroot.childnodes.length; i++) 
    {
      node = navroot.childnodes[i];
      if (node.nodename=='li') 
      {
        node.onmouseover=function() 
        {
          this.classname+=' over';
        }
        node.onmouseout=function() 
        {
          this.classname=this.classname.replace(' over', '');
        }
      }
    }
  }
}
 
 
/*-------------------------------------------
  ie6 css main nav dropdowns
-------------------------------------------*/
function iedropdownsfilter() {
  if(document.all&&document.getelementbyid) 
  {
    navroot = document.getelementbyid('filter-drop');
    if (!navroot) { return false; }
     
    for(i=0; i<navroot.childnodes.length; i++) 
    {
      node = navroot.childnodes[i];
      if (node.nodename=='div') 
      {
        node.onmouseover=function() 
        {
          this.classname+=' over';
        }
        node.onmouseout=function() 
        {
          this.classname=this.classname.replace(' over', '');
        }
      }
    }
  }
}
   
 
 
 
/*-------------------------------------------
  view more
-------------------------------------------*/
function itemviewer() {
  //$(document).delegate('#filter-drop a, .expandable > .load, .filter-nav a', 'click', function (e)
  //$(document).delegate('.expandable > .load, .filter-nav a', 'click', function (e)
  $(document).delegate('.filter-nav a', 'click', function (e) 
  {
    // get the src for the content we're trying to view
    var datasrc = $(this).attr('data-src');
     
    // determine whether we're trying to sort the existing view
    if($(this).attr('data-sort')) {
      var datasort = $(this).attr('data-sort');
    } else {
      var datasort = $('.filter-nav > li > a').attr('data-sort');
    }
 
    // how many items do we have?
    var itemoffset = $('.expandable .listing > li').size();
     
    //find out if we clicked the menu, if so, clear out everything and add data attribute to the load more
    if($(this).closest('p').hasclass("filter"))
    {
      var hiddendiv = $('<p />', {
        "class": "items hidden spacer",
        "height": $('.expandable').outerheight()
      });
      $('.expandable > .load').before(hiddendiv);
       
      $('.expandable > ul, .expandable > p:not(.spacer)').remove();
      $('.load').attr('data-src',datasrc);
   
      // change class of dropdown toggle
      var clickedclass = $(this).parent().attr('class');
      $("#filter-drop strong").removeclass().addclass(clickedclass);
   
      // change text of dropdown toggle
      var thislabel = $(this).text();
      $("#filter-drop strong span").text(thislabel);
       
      // grab datasrc from clicked-on menu item and populate the filters with it
      $('.filter-nav a').attr('data-src' , datasrc);
      $('.filter-nav li').removeclass('active');
      $('.filter-nav > li').eq(0).addclass('active');
    }
       
    //find out if we clicked the filter nav, if so let's switch the active class
    if($(this).closest('ul').hasclass("filter-nav")) {
      $('.filter-nav li').removeclass('active');
      $(this).parent().addclass('active');
       
      //also let's remove all the items before replacing them with what we want
      var hiddendiv = $('<p />', {
        "class": "items hidden spacer",
        "height": $('.expandable').outerheight()
      });
      $('.expandable > .load').before(hiddendiv);
       
      $('.expandable > ul, .expandable > p:not(.spacer)').remove();
    }
     
    $.get(datasrc, { offset: itemoffset, sort: datasort }, function(data) {
      $('.expandable .spacer').remove();
      var hiddendiv = $('<p class="items hidden"></p>');
      $('.expandable > .load').before(hiddendiv);
      $(hiddendiv).append(data).hide().removeclass("hidden").fadein(); 
    });
     
    e.preventdefault();
  });
}
 
 
function jstabsetinit() {
  var $tabset = $('.heading-tabset').eq(0);
   
  var $tablist = $('<ul />', {"class": "heading-tab"});
  $tabset.prepend($tablist);
   
  $('p.heading-tab h3').each(function()
  {
    var $anchor = $('<a />', {
      "class": $(this).attr('class'),
      "onclick": '_gaq.push([\'_trackevent\', \'connect\', \'click\', \'head'+$(this).attr('class')+'\', 3]);',
      "href": "#",
      "html": $(this).html()
    });
    var $li = $('<li />');
    $li.append($anchor);
    $tablist.append($li);
  });
   
  $('p.heading-tab').remove();
   
  $('.heading-tabset:gt(0)').each(function()
  {
    $tabset.append($(this).find('.listing'));
    $(this).remove();
  });
}
 
 
function slider() {
  $('.slider').each(function()
  {
    // as we loop through the slider items we'll document the tallest one and the left position
    // of each element
    var maxheight = 0, lastwidth = 0;
     
    // grab the slider and make sure the overflow is hidden and it has a defined width
    var $slider = $(this);
    $slider.css('width', $slider.outerwidth());
    $slider.css('position', 'relative');
    $slider.css('overflow', 'hidden');
     
    // store the index (or the currently "selected" slide)
    $slider.prop('index', 0);
     
    // loop through each of the direct children
    $slider.find('> *').each(function()
    {
      // localize the child as a jquery object
      var $li = $(this);
       
      // if this is the tallest child, document it
      if ($li.outerheight() > maxheight)
      {
        maxheight = $li.outerheight();
      }
       
      // position each child to the immediate right of its preceding sibling
      $li.css('position', 'absolute');
      $li.css('top', 0);
      $li.css('left', lastwidth);
       
      // update our maths so we know where to place the next sibling
      lastwidth+= $li.outerwidth();
    });
     
    // set the height of the slider based on the tallest child
    //$slider.css('height', maxheight);
     
    // build the previous control button and store a reference to its related slider
    var $previous = $('<a />', {"class": "prev disabled", "href": "#", "text": "previous"});
    $previous.prop('slider', $slider);
     
    // build the next control button and store a reference to its related slider
    var $next = $('<a />', {"class": "next", "href": "#", "text": "next"});
    $next.prop('slider', $slider);
     
    // build the controls p and add it to the markup
    var $controls = $('<p />', {"class": "controls"}).append($previous).append($next);
    $slider.after($controls);
    $slider.prop('controls', $controls);
  });
   
  // watch for clicks on the controls
  $(document).delegate('.listing + .controls .prev, .listing + .controls .next', 'click', function (event)
  {
    // stop our clicks from affecting the browser/url
    event.preventdefault();
     
    // localize a jquery version of the clicked link
    var $anchor = $(this);
     
    // grab the slider, that we previously stored while creating these links
    var $slider = $anchor.prop('slider');
     
    // localize the index for prettier code
    var focusedindex = $slider.prop('index');
     
    // determine what slide is focused
    var $focus = $slider.find('> *').eq(focusedindex);
     
    // grab the width of that focused slide
    var widthdelta = $focus.outerwidth();
     
    // if we clicked the next button we're moving to the left (negative values, so
    // multiply by -1).
    if ($anchor.hasclass('next'))
    {
      widthdelta *= -1;
    }
     
    focusedindex += ($anchor.hasclass('next')) ? 1 : -1;
     
    // check that the upcoming movement won't push the first element too far to the right
    // leaving whitespace before the element
    if ($slider.find('> *').eq(0).position().left + widthdelta > 0)
    {
      return true;
    }
     
    // check that the upcoming movement won't push the last element too far to the left
    // leaving whitespace after the element
    var $lastchild = $slider.find('> *').eq(-1)
    if ($lastchild.position().left + widthdelta < $slider.outerwidth() - $lastchild.outerwidth() - 1)
    {
      return true;
    }
     
    // get all the child elements, so we can loop through them and detmine offsets based
    // on widths
    var $siblings = $slider.find('> *');
     
    // finally loop through each child and kick off the animation
    $siblings.each(function(index)
    {
      // we'll determine the `left` in just a second, sit tight
      var left = 0;
       
      // localize the child element
      var $li = $(this);
       
      // loop through each sibling and determine the new left
      if (index < focusedindex)
      {
        left = -$slider.outerwidth();
      }
       
      if (index >= focusedindex && index < focusedindex + 3)
      {
        left = 219 * (index - focusedindex);
      }
       
      if (index >= focusedindex + 3)
      {
        left = $slider.outerwidth() * 2;
      }
       
      // start the animation
      $li.animate({'left': left}, 300);
       
      // are we at the beginning?
      if (index == 0 && left == 0)
      {
        $slider.prop('controls').find('.prev').addclass('disabled');
      }
      else if (index == 0)
      {
        $slider.prop('controls').find('.prev').removeclass('disabled');
      }
       
      // are we at the end?
      if (index == $siblings.size()-1 && left == $slider.outerwidth() - $lastchild.outerwidth() - 1)
      {
        $slider.prop('controls').find('.next').addclass('disabled');
      }
      else if (index == $siblings.size()-1)
      {
        $slider.prop('controls').find('.next').removeclass('disabled');
      }
    });
     
    // if we got down here then we actually moved the slider, update the reference to the
    // focused slide
    $slider.prop('index', focusedindex);
  });
}
 
function headertabs()
{
  var $tabset = $('.heading-tabset')
   
  $tabset.find('.listing:gt(0)').hide();
  $tabset.find('.controls:gt(0)').hide();
  $tabset.find('.heading-tab li').eq(0).addclass('active');
   
  $(document).delegate('.heading-tab a', 'click', function(event)
  {
    event.preventdefault();
     
    $(this).parent().addclass('active');
    $(this).parent().siblings().removeclass('active');
     
    var index = $(this).parent().prevall('*').size();
     
    $(this).parents('.heading-tabset').find('.listing').hide();
    $(this).parents('.heading-tabset').find('.listing').eq(index).show();
     
    $(this).parents('.heading-tabset').find('.controls').hide();
    $(this).parents('.heading-tabset').find('.controls').eq(index).show();
  });
}
 
function carousel()
{
  $(document).delegate('.carousel .next, .carousel .previous', 'click', function(event)
  {
    // prevent the default anchor action
    event.preventdefault();
     
    // get the current carousel
    var $carousel = $(this).parents('.carousel');
     
    // check if we're already in the middle of a movement
    if ($carousel.prop('moving'))
    {
      return true;
    }
     
    // if we actually clicked it, then stop any running timers
    if (event.clientx)
    {
      stop($carousel);
    }
     
    // localize the index, so we know where we are
    var index = $carousel.prop('index');
     
    // determine if we're going forward or backward
    var movingforward = $(this).hasclass('next');
     
    // grab all the slides
    var $slides = $carousel.find('.carousel-item');
     
    // grab the currently focused slide
    var $focus = $slides.eq(index);
     
    // figure out where're we going from here
    var nextobject = movingforward ? nextslide($carousel, index) : previousslide($carousel, index);
     
    // locaalize the next p to be shown
    var $next = nextobject.element;
     
    // localize the index of the next element to be shown
    var newindex = nextobject.index;
     
    // determine where we should place the next element so it slides from the correct side
    var initialleft = movingforward ? $(document.body).outerwidth() : -$next.outerwidth();
     
    // save the current zero position, everything will move to/from here
    var zeroposition = $focus.offset().left;
     
    // determine where the focus is moving to
    var targetleft = zeroposition + (movingforward ? -$next.outerwidth() : $next.outerwidth());
     
    // we're comitted to moving now so set the flag to true so we don't duplicate animations
    $carousel.prop('moving', true);
     
    // reset all z-indexes to 1
    $slides.css('z-index', 1);
     
    // make the currently focused slide higher than all the rest
    $focus.css('z-index', 2);
     
    // setup the current slide so it can animate out
    $focus.css({
      "position": "absolute",
      "top": 0,
      "left": zeroposition
    });
     
    // setup the next slide to slide in, moving it above the focused slide and off screen
    $next.css({
      "opacity": 0,
      "position": "absolute",
      "top": 0,
      "left": initialleft,
      "z-index": 3
    });
     
    // animate the current slide out
    $focus.animate({
      "opacity": 0,
      "left": targetleft
    }, 800);
     
    // set up what we're animating
    var animation = {
      "opacity": 1,
      "left": zeroposition
    }
     
    // horrible ie fix
    if ($.browser.msie && parseint($.browser.version) <= 8)
    {
      delete animation.opacity;
      $focus.get(0).style.removeattribute('filter');
      $next.get(0).style.removeattribute('filter');
    }
     
     
     
    // animate in the next slide, then upon completion reset everything. switch it back to
    // relative positioning, remove our animation flag and hide the previous element
    $next.show().animate(animation, 800, function()
    {
      $focus.hide();
      $(this).css({
        "position": "relative",
        "left": 0
      });
       
      // fix msie
      if ($.browser.msie && parseint($.browser.version) <= 8)
      {
        this.style.removeattribute('filter');
      }
       
      $carousel.prop('moving', false);
    });
     
    // animate the height of our carousel, because things are abosulte the box model is shot
    $carousel.animate({
      //"min-height": $next.outerheight()
    });
     
    // finally update our index to reflect the current view
    $carousel.prop('index', newindex);
  });
   
  $(document).delegate('.carousel .pause', 'click', function(event)
  {
    // prevent the default anchor action
    event.preventdefault();
     
    // localize the carousel
    var $carousel = $(this).parents('.carousel');
     
    // get the current timer, if it exists
    var timer = $carousel.prop('timer');
     
    // no timer? start it
    if (!timer)
    {
      start($carousel);
    }
     
    // timer? stop it
    else
    {
      stop($carousel);
    }
  });
   
  // start a new timer, additionally update the play/pause button to the correct visual state
  function start($carousel)
  {
    timer = setinterval(function()
    {
      $carousel.find('.next').eq(0).trigger('click');
       
      //n.c.: added to stop carousel after one round.
      var index = $carousel.prop('index');
      if ( index==0 && carousel_round > 0 ) {
        stop($carousel);
      }
      else if ( index==1 ) {
        carousel_round++;
      }
       
    }, 5000);
     
    $carousel.prop('timer', timer);
    $carousel.find('.play.pause').removeclass('play');
  }
   
  // stop any existing timers, additionally update the play/pause button to the correct
  // visual state
  function stop($carousel)
  {
    clearinterval(timer);
     
    $carousel.prop('timer', false);
    $carousel.find('.pause').addclass('play');
     
    //n.c.: added to stop carousel after one round.
    carousel_round = 0;
  }
   
  function nextslide($carousel, index)
  {
    var $slides = $carousel.find('.carousel-item');
     
    if (index+1 < $slides.size())
    {
      return {"index":index+1, "element":$slides.eq(index+1)};
    }
     
    return {"index":0, "element":$slides.eq(0)};
  }
   
  function previousslide($carousel, index)
  {
    var $slides = $carousel.find('.carousel-item');
     
    if (index-1 >= 0)
    {
      return {"index":index-1, "element":$slides.eq(index-1)};
    }
     
    return {"index":$slides.size()-1, "element":$slides.eq(-1)};
  }
   
  // build the controls for inclusion into the page
  var $previousbtn = $('<a />', {"class": "previous", "href": "#", "text": "previous"});
  var $playpausebtn = $('<a />', {"class": "play pause", "href": "#", "text": "play/pause"});
  var $nextbtn = $('<a />', {"class": "next", "href": "#", "text": "next"});
  var $controlsdiv = $('<p />', {"class": "carousel-controls"});
  $controlsdiv.append($previousbtn);
  $controlsdiv.append($playpausebtn);
  $controlsdiv.append($nextbtn);
   
  // loop through each carousel and set some default properties/styles
  $('.carousel').each(function()
  {
    // localize the carousel to this function
    var $carousel = $(this);
     
    // set the positioning and a default height, becuase we're going to be taken out of the
    // flow once our animation starts
    $carousel.css({
      "position": "relative"
      //"min-height": $carousel.find('.carousel-item').eq(0).outerheight() //n.c. commented out
    });
     
    // store the currently visible slide's index
    $carousel.prop('index', 0);
     
    // hide subsequent slides
    $carousel.find('.carousel-item:gt(0)').hide();
     
    // append in our controls
    $carousel.prepend($controlsdiv.clone(true));
     
    // add the previous/next images
    $carousel.find('.main-image').each(function(index)
    {
      // get the previous image
      var $previmage = $(previousslide($carousel, index).element).find('.main-image').clone();
       
      // remove the class
      $previmage.removeclass('main-image');
       
      // create a link for the previous image
      var $previousanchor = $('<a />', {
        "href": "#",
        "class": "prev-image",
        "html": $previmage
      });
      $previousanchor.css('opacity', 0.2);
       
      // add in the previous image/anchor
      $(this).before($previousanchor);
       
      // get the next image
      var $nextimage = $(nextslide($carousel, index).element).find('.main-image').clone();
       
      // remove the class
      $nextimage.removeclass('main-image');
       
      // create a link for the previous image
      var $nextanchor = $('<a />', {
        "href": "#",
        "class": "next-image",
        "html": $nextimage
      });
      $nextanchor.css('opacity', 0.2);
       
      // add in the next image/anchor
      $(this).after($nextanchor);
    });
     
    // start the carousel by default
    start($carousel);
  });
}
 
function emergencyclose() {
  //$('.emergency .wrap').append('<a href="#" class="close">close</a>');
   
  $(document).delegate('.emergency .close', 'click', function(event)
  {
    event.preventdefault();
    $(this).parents('.emergency').remove();
  });
}
 
function replylinks() {
  //$close = $('<a />', {"class": "close", "href": "#", "text": "close"});
  $twitterwrap = $('<p />', {"id": "twitter-wrap"});
  //$twitterwrap.append($close);
  $twitter = $('<p />', {"id": "twitter"});
  $twitterwrap.append($twitter);
  $(document.body).append($twitterwrap);
   
  /*twttr.anywhere(function (t) {
    t("#twitter").tweetbox({
      "width": 515,
      "height": 133,
      "defaultcontent": "",
      "ontweet": function()
      {
        $("#twitter-wrap").fadeout('fast');
        $('#overlay').fadeout();
        $('#overlay').remove();
        _gaq.push(['trackevent', 'home', 'submitreply', 'twitterreply', 5]);
        //$twitter.remove();
      }
    });
  });*/
   
  $(document).delegate('.link-reply', 'click', function(event)
  {
    event.preventdefault();
     
    //if ( !$('#overlay') ) {
      $(document.body).prepend($('<p />', {"id": "overlay"}));
    //}
 
    $('#overlay').fadein();
     
    $("#twitter-wrap").css({
      "position": "fixed",
      "top": 200,
      "left": ($(document.body).width()-515)/2
    });
     
    if ($.browser == 'msie')
    {
      $("#twitter-wrap").css({
        "position": "absolute",
        "top": $(document.body).scrolltop() + 200
      });
    }
     
    $("#twitter-wrap").fadein('fast');
  });
   
  $(document).delegate('#overlay, #twitter-wrap .close', 'click', function(event)
  {
    event.preventdefault();
     
    $('#twitter-wrap').fadeout('fast');
    $('#overlay').fadeout('fast', function()
    {
      $(this).remove();
    })
  });
}
 
function adjournlinks()
{
  $('.adjoin-options').each(function()
  {
    var headings = [];
     
    $(this).find('*[data-heading]').each(function()
    {
      headings[$(this).attr('data-heading')] = $(this).attr('data-heading');
    });
     
    var $headings = $('<ul />', {
      "class": "adjoin-header"
    });
     
    for (var heading in headings)
    {
      var $li = $('<li />');
      var $a = $('<a />', {
        "href": "#",
        "onclick": '_gaq.push([\'_trackevent\', \'socialdirectory\', \'click\', \'head'+heading+'\', 3]);',
        "data-show": heading,
        "text": heading
      })
       
      $li.append($a);
      $headings.append($li);
    }
     
    $(this).before($headings);
  });
   
  $(document).delegate('a[data-show]', 'click', function(event)
  {
    // stop the default click action
    event.preventdefault();
     
    // set active
    $(this).parent().siblings().find('.active').removeclass('active');
    $(this).addclass('active');
     
    // find the appropriate elements
    $('.adjoin-options *[data-heading]').hide();
    $('.adjoin-options *[data-heading="'+$(this).attr('data-show')+'"].').fadein();
  });
   
  $('.adjoin-header').find('a[data-show]').eq(0).trigger('click');
}
 
$(document).ready(function ()
{
  var $filter = $('#filter-drop');
  var $filterspacer = $('<p />', {
    "class": "filter-drop-spacer",
    "height": $filter.outerheight()
  });
  var $homeshield = $('.home .primary');
  var $totalheight = $('.carousel').outerheight() + $('.header').outerheight()
 
 
  if ($filter.size())
  {
    $(window).scroll(function ()
    {
      if($(window).scrolltop() > $totalheight ) {
         
        $homeshield.addclass("shieldfix");
      } 
      else if ($homeshield.hasclass('shieldfix') && $(window).scrolltop() < $totalheight)
      {
        $homeshield.removeclass("shieldfix");
      }
       
      if (!$filter.hasclass('fix') && $(window).scrolltop() > $filter.offset().top)
      {
        $filter.css('width', $filter.width());
        $filter.before($filterspacer);
        $filter.addclass("fix");
      }
      else if ($filter.hasclass('fix') && $(window).scrolltop() < $filterspacer.offset().top)
      {
        $filter.removeclass("fix");
        $filterspacer.remove();
      }
    });
  }
   
});
 
function get_more_home_items() {
   
  if ( views_left>0 ) {
    jquery("#home_items_loading").show();
     
    jquery.ajax({
     type: 'post',
     url: 'ajax/home_items',
     data: 'timestamp='+curr_timestamp+'&index='+views_left,
     datatype: 'json',
     success: function(data) {
      jquery("#home_items_loading").hide();      
      jquery("#home_content").append(data.html);
      curr_timestamp=data.timestamp;
     }
    });
     
    views_left--;
  }
   
  var click_index = 2-views_left;
   
  _gaq.push(['_trackevent', 'viewmorechannels', 'click', 'viewmore_'+click_index.tostring(), 3]);
 
  if ( views_left<=0 ) {
    jquery("#view_more").hide();
  }
}
 
/*-------------------------------------------
  add zebra strip rows of table with class "stripe" -- chris traganos
-------------------------------------------*/
function zebra_strip_rows() {
 $("table.stripe tr:odd").addclass("odd");
 $("table.stripe tr:even").addclass("even");
}
 
function visitor_site_slideshow() {
 /* $('.visitors_slideshow').cycle({
   fx: 'fade' // choose your transition type, ex: fade, scrollup, shuffle, etc...
 });  */
  
}