jQuery фоновое изменение изображения исчезает

0

Я работаю над каким-то слайдером jquery. Это почти стандартный NivoSlider, но я хочу изменить основные изображения с помощью собственных элементов управления.

Поэтому у меня есть что-то вроде этого:

HTML:

<div id="slider" class="nivoSlider">
   <img src="img/slider/start1.jpg"  alt="" />
   <img src="img/slider/start2.jpg"  alt=""/>
   <img src="img/slider/start3.jpg"  alt="" />
</div>

<!--controls-->

<ul class="lista">
   <li class="first"></li><!--thumbnail here on background image-->
   <li class="second"></li>
   <li class="third"></li>  
</ul>
</div>

Когда вы нажимаете, например, второй элемент li, вы меняете основное изображение в слайдере и миниатюре. Первая часть отлично работает, вторая часть выглядит так (я новичок в javascript):

    $('.first').click(function(){
    $(this).css('background', 'url(img/slider/1min_a.jpg)');
    $('.second').css('background', 'url(img/slider/2min.jpg)');
    $('.third').css('background', 'url(img/slider/3min.jpg)');
    }); 

   $('.second').click(function(){
    $(this).css('background', 'url(img/slider/2min_a.jpg)');    
    $('.first').css('background', 'url(img/slider/1min.jpg)');
    $('.third').css('background', 'url(img/slider/3min.jpg)');
    });     

   $('.third').click(function(){
    $(this).css('background', 'url(img/slider/3min_a.jpg)');
    $('.first').css('background', 'url(img/slider/1min.jpg)');
    $('.second').css('background', 'url(img/slider/2min.jpg)');
    }); 

И у меня есть два вопроса:
1. Как я могу сделать это как можно проще?
2. Как я могу добавить эффект fadeOut/fadeIn, чтобы предотвратить "мигание" изображения при изменении фона?

1 ответ

0

Это довольно просто.

Шаг 1. Новый атрибут данных

Шаг 2. Не указывайте, как вы это делаете. Вы можете сделать динамическое слайд-шоу.

В вашем HTML: <div class="thumbnail" data-bigimg="image src of your main image" >

Убедитесь, что вы загружаете весь источник основного изображения во время цикла, т.е. Назначая атрибут data-bigimg равным полному пути основного изображения src для каждого пальца div.

$(document).on('click', '.thumbnail', function () {
    var img_src = $(this).attr('data-bigimg');
    $("#main_img").fadeOut(300,function(){
      $("#main_img").attr("src", img_src).fadeIn(500);//main_img is your main Slide show image.
     });
});

Объяснение:

  1. при щелчке большого пальца вы получаете значение атрибута данных.
  2. теперь вы назначаете это img src на основное изображение слайд-шоу

Измените свой html:

<div class="nivoSlider">
   <img id="main_img" src="img/slider/start1.jpg"  alt="" />
</div>

<!--controls-->

<ul class="lista">
   <li class="thumbnail" data-bigimg="src of main image to be displayed"></li><!--thumbnail here on background image-->
   <li class="thumbnail" data-bigimg="src of main image to be displayed"></li>
   <li class="thumbnail" data-bigimg="src of main image to be displayed"></li>  
</ul>
  • 0
    Хорошо, понял, но сначала: это решение работает без jiv-файлов nivoslider, так что оно мне больше не нужно. Но в Nivo у вас есть плавные переходы между изображениями (например, непрозрачность или sth), и как я могу применить это к своему коду? И второе: я хочу изменить фоновое изображение моего эскиза, когда он активен. Как я могу это сделать?
  • 0
    ну, вам не нужны никакие js, если вы знаете, как написать свой собственный javascript ... все переходы возможны ... в этом случае ... слайд не будет возможен ... но изображение может переключаться с исчезновением на выходе ... и возьмите хорошую книгу о JavaScript

Ещё вопросы

Сообщество Overcoder
Наверх
Меню