Как использовать изображения как навигацию с внутренним слайд-шоу? - PullRequest
Новая
       22

Как использовать изображения как навигацию с внутренним слайд-шоу?

0 голосов
/ 23 марта 2010

Я очень плохо знаком с 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, поэтому прошу прощения, если это беспорядок. Я очень благодарен за любые предложения. Спасибо!

1 Ответ

0 голосов
/ 07 апреля 2010

JavasScript, который я создал, делает то, что я хочу, то есть он заставляет навигационные кнопки соответствующим образом изменять состояния, отображая различные изображения для «по умолчанию / выкл», «зависание» и «вкл». Что я не могу понять, как это сделать, так это создать «ссылку» между jquery.innerfade.js (которую я не создал и, к сожалению, не очень хорошо понимаю) и JavaScript, который я написал. В идеале, если первое промо-изображение ("_images / carousel / promo1.jpg") отображается через jquery.innerfade.js, первая промо-кнопка навигации ("function promo1on ()") будет отображаться в состоянии "включено" .

Чтобы дать представление о желаемом результате, взгляните на сайт Марты Стюарт: http://www.marthastewart.com/

Я пытаюсь воссоздать подобное слайд-шоу, используя только JavaScript и CSS вместо Flash. Надеюсь, что это имеет смысл! Спасибо !!!

Кейти

...