如何使用图像作为与innerfade幻灯片导航？

Question

我对JavaScript非常陌生，对它的工作原理只有最基本的理解，所以请耐心等待。 :)我正在使用jquery.innerfade.js脚本为我正在开发的网站创建带淡入淡出转场的幻灯片，并添加了在“幻灯片”之间导航的导航按钮（设置为背景图像） 。导航按钮有三种状态：默认/关闭，悬停和开启（每个状态是一个单独的图像）。我创建了一个单独的JavaScript文档，在单击按钮时将按钮设置为“打开”。 “悬停”状态是通过CSS实现的。

幻灯片放映和导航按钮均可正常工作。我只想添加一件事：我想让相应的导航按钮显示为“on”，而相关的“幻灯片”则是“正在播放”。

这里的HTML：

<div id="mainFeature"> 
<ul id="theFeature"> 
    <li id="the1feature"><a href="#" name="#promo1"><img src="_images/carousel/promo1.jpg" /></a></li> 
    <li id="the2feature"><a href="#" name="#promo2"><img src="_images/carousel/promo2.jpg" /></a></li> 
    <li id="the3feature"><a href="#" name="#promo3"><img src="_images/carousel/promo3.jpg" /></a></li> 
</ul> 
<div id="promonav-con"> 
    <div id="primarypromonav"> 
    <ul class="links"> 
     <li id="the1title" class="promotop"><a rel="1" href="#promo1" class="promo1" id="promo1" onMouseDown="promo1on()"><strong>Botox Cosmetic</strong></a></li> 
    <li id="the2title" class="promotop"><a rel="2" href="#promo2" class="promo2" id="promo2" onMouseDown="promo2on()"><strong>Promo 2</strong></a></li> 
    <li id="the3title" class="promotop"><a rel="3" href="#promo3" class="promo3" id="promo3" onMouseDown="promo3on()"><strong>Promo 3</strong></a></li> 
    </ul> 
    </div> 
</div> 

这里是jquery.innerfade.js，与我的变化：

(function($) { 
$.fn.innerfade = function(options) { 
    return this.each(function() { 
     $.innerfade(this, options); 
    }); 
}; 

$.innerfade = function(container, options) { 
    var settings = { 
     'speed':   'normal', 
     'timeout':   2000, 
     'containerheight': 'auto', 
     'runningclass':  'innerfade', 
     'children':   null 
    }; 
    if (options) 
     $.extend(settings, options); 
    if (settings.children === null) 
     var elements = $(container).children(); 
    else 
     var elements = $(container).children(settings.children); 
    if (elements.length > 1) { 
     $(container).css('position', 'relative').css('height', settings.containerheight).addClass(settings.runningclass); 
     for (var i = 0; i < elements.length; i++) { 
      $(elements[i]).css('z-index', String(elements.length-i)).css('position', 'absolute').hide(); 
     }; 
     this.ifchanger = setTimeout(function() { 
      $.innerfade.next(elements, settings, 1, 0); 
     }, settings.timeout); 
     $(elements[0]).show(); 
    } 
}; 

$.innerfade.next = function(elements, settings, current, last) { 
    $(elements[last]).fadeOut(settings.speed); 
    $(elements[current]).fadeIn(settings.speed, function() { 
     removeFilter($(this)[0]); 
    }); 

    if ((current + 1) < elements.length) { 
     current = current + 1; 
     last = current - 1; 
    } else { 
     current = 0; 
     last = elements.length - 1; 
    } 

    this.ifchanger = setTimeout((function() { 
     $.innerfade.next(elements, settings, current, last); 
    }), settings.timeout); 
}; 
})(jQuery); 

// **** remove Opacity-Filter in ie **** 
function removeFilter(element) { 
if(element.style.removeAttribute){ 
    element.style.removeAttribute('filter'); 
} 
} 

jQuery(document).ready(function() { 
jQuery('ul#theFeature').innerfade({ 
    speed: 1000, 
    timeout: 7000, 
    containerheight: '291px' 
}); 

// jQuery('#mainFeature .links').children('li').children('a').attr('href', 'javascript:void(0);'); 
jQuery('#mainFeature .links').children('li').children('a').click(function() { 
    clearTimeout(jQuery.innerfade.ifchanger); 
    for(i=1;i<5;i++) { 
     jQuery('#the'+i+'feature').css("display", "none"); 
     //jQuery('#the'+i+'title').children('a').css("background-color","#226478"); 
    } 
    // if(the_widths[(jQuery(this).attr('rel')-1)]==960) { 
    // jQuery("#vic").hide(); 
    // } else { 
    // jQuery("#vic").show(); 
    // } 

    // jQuery('#the'+(jQuery(this).attr('rel'))+'title').css("background-color", "#286a7f"); 
    jQuery('#the'+(jQuery(this).attr('rel'))+'feature').css("display", "block"); 
    clearTimeout(jQuery.innerfade.ifchanger); 
}); 
}); 

而且，我创建了单独的JavaScript：

function promo1on() {document.getElementById("promo1").className="promo1on"; document.getElementById("promo2").className="promo2"; document.getElementById("promo2").className="promo2"; } 
function promo2on() {document.getElementById("promo2").className="promo2on"; document.getElementById("promo1").className="promo1"; document.getElementById("promo3").className="promo3"; } 
function promo3on() {document.getElementById("promo3").className="promo3on"; document.getElementById("promo1").className="promo1"; document.getElementById("promo2").className="promo2"; } 

最后，CSS：

#mainFeature {float: left; width: 672px; height: 290px; margin: 0 0 9px 0; list-style: none;} 
#mainFeature li {list-style: none;} 
#mainFeature #theFeature {margin: 0; padding: 0; position: relative;} 
#mainFeature #theFeature li {position: absolute; top: 0; left: 0;} 
#promonav-con {width: 463px; height: 26px; padding: 0; margin: 0; position: absolute; z-index: 900; top: 407px; left: 283px;} 
#primarypromonav {padding: 0; margin: 0;} 
#mainFeature .links {padding: 0; margin: 0; list-style: none; position: relative; font-family: arial, verdana, sans-serif; width: 463px; height: 26px;} 
#mainFeature .links li.promotop {list-style: none; display: block; float: left; display: inline; margin: 0; padding: 0;} 
#mainFeature .links li a {display: block; float: left; display: inline; height: 26px; text-decoration: none; margin: 0; padding: 0; cursor: pointer;} 
#mainFeature .links li a strong {margin-left: -9999px;} 
#mainFeature .links li a.promo1 {background: url(../_images/carouselnav/promo1.gif); width: 155px;} 
#mainFeature .links li:hover a.promo1 {background: url(../_images/carouselnav/promo1_hover.gif); width: 155px;} 
#mainFeature .links li a.promo1:hover {background: url(../_images/carouselnav/promo1_hover.gif); width: 155px;} 
.promo1on {background: url(../_images/carouselnav/promo1_on.gif); width: 155px;} 
#mainFeature .links li a.promo2 {background: url(../_images/carouselnav/promo2.gif); width: 153px;} 
#mainFeature .links li:hover a.promo2 {background: url(../_images/carouselnav/promo2_hover.gif); width: 153px;} 
#mainFeature .links li a.promo2:hover {background: url(../_images/carouselnav/promo2_hover.gif); width: 153px;} 
.promo2on {background: url(../_images/carouselnav/promo2_on.gif); width: 153px;} 
#mainFeature .links li a.promo3 {background: url(../_images/carouselnav/promo3.gif); width: 155px;} 
#mainFeature .links li:hover a.promo3 {background: url(../_images/carouselnav/promo3_hover.gif); width: 155px;} 
#mainFeature .links li a.promo3:hover {background: url(../_images/carouselnav/promo3_hover.gif); width: 155px;} 
.promo3on {background: url(../_images/carouselnav/promo3_on.gif); width: 155px;} 

希望这是有道理的！再一次，我对JavaScript/JQuery非常陌生，所以我很抱歉如果这是一团糟。我非常感谢任何建议。谢谢！

Answer 1

我创建的JavasScript完成我想要的操作，即它导致导航按钮正确更改状态，显示“default/off”，“hover”和“on”的不同图像。我无法弄清楚如何做的是在jquery.innerfade.js（我没有创建，可悲的是，不太明白）和我编写的JavaScript之间创建一个“链接”。理想情况下，只要第一张促销图片（“_images/carousel/promo1.jpg”）通过jquery.innerfade.js显示，第一张促销导航按钮（“function promo1on（）”）将显示为“开启”状态。

为了给我想要的结果的想法，看看玛莎·斯图尔特网站： http://www.marthastewart.com/

我试图重新像这样的幻灯片，只使用JavaScript和CSS来代替闪光。希望是有道理的！谢谢！！！

Katie