effect.js

// creating a global object ot hold the namespace
var GLOBAL = {

'updateVisible' : function(e) {
  GLOBAL.currentVisible = jQuery(this).attr('id').match(/\d/);
  console.log('GLOBAL.currentVisible is ' + GLOBAL.currentVisible);
},
'addFrontPageImages': function() {
  // first add the cycle functino to run through the li's containing the content for the page
  // the after GLOBAL.updateVisible updates a variable to check against in future
    jQuery('#headline ul').cycle({
      fx: 'fade',
      after: GLOBAL.updateVisible
      });
  
  
  
  // iterate through the links, and get their index.
  // set their id, for each one, as a variable for future reference
  jQuery('.features_list li').each(function(index) {
    jQuery(this).attr('id', ('feature_' + index));

    // when you mouse over, check if the visible image corresponds with the story you're highlighting
    // and change accordingly if so
    jQuery(this).hover(function() {
      // check if the parseInt on the image is the same index as the current visible image
      // and do nothing it's true
      if (GLOBAL.currentVisible == index) {
        console.log("image and highlighted story are the same");
      } else {
      // pause the cycle method, manually update the visible image, and make a note in the GLOBAL object
      jQuery('#headline ul').cycle('pause');
      jQuery('#headline li').hide();
      // if there's no javascript, any li with the class of hidden isn't visible
      jQuery('#headline li').css('opacity',1);
      GLOBAL.currentVisible = index;
      jQuery('#headline ul > li').eq(index).fadeIn();
      }

    }, function() {
      // switch the cycle back on when we mouse out
      jQuery('#headline ul').cycle('resume');
    });
  });
}

sample.html

<div id="headline">
      <ul>
        <li id="headline_0">
          <img alt="Photo" src="/files/shops/random_number/assets/bon-voyage.jpg"/>    
        </li>
        <li class="hidden" id="headline_1">
          <img alt="Photo" src="/files/shops/random_number/assets/bon-voyage_balloon.jpg"/>    
        </li>
        <li class="hidden" id="headline_2">
          <img alt="Photo" src="/files/shops/random_number/assets/bon-voyage-sale.jpg"/>    
        </li>
      </ul>
    </div>