如何使用图像作为内淡出幻灯片的导航？

Question

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

幻灯片和导航按钮都运行良好。我只想添加一件事：我希望相应的导航按钮显示为“打开”，而相关的“幻灯片”正在“播放”。

这是 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

我创建的 JavaScript 执行了我想要的操作，即它使导航按钮适当地更改状态，为“默认/关闭”​​、“悬停”和“打开”显示不同的图像。我不知道如何在 jquery.innerfade.js （我没有创建它，而且遗憾的是我不太理解）和我编写的 JavaScript 之间创建一个“链接”。理想情况下，只要第一个促销图像（“_images/carousel/promo1.jpg”）通过 jquery.innerfade.js 显示，第一个促销导航按钮（“function promo1on()”）就会显示在“on”状态。

要了解我想要的结果，请查看 Martha Stewart 网站：
http://www.marthastewart.com/

我正在尝试仅使用 JavaScript 重新创建这样的幻灯片和 CSS 而不是 Flash。希望这是有道理的！谢谢！！！

凯蒂