如何使用圖像作爲與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