Я работаю над каким-то слайдером 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. Новый атрибут данных
Шаг 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.
});
});
Объяснение:
Измените свой 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>