Estou precisando criar um efeito no meu slideshow que para cada imagem exibida no slideshow o fundo da div class="banner-backg"
troque o background-image.
Para o slider estou usando o http://bxslider.com/options
: HTML do Slider
<div class="banner-backg">
<div class="banner-center">
<ul class="bxslider">
<li><img src="images/banner_1.png" /></li>
<li><img src="images/banner_2.png" /></li>
<li><img src="images/banner_3.png" /></li>
</ul>
</div>
</div>
: jQuery
$('.bxslider').bxSlider({
adaptiveHeight: true,
mode: 'fade',
auto:true,
easing:'easeInOutCubic',
useCSS:false,
speed: 1000
});
Uma alternativa que pensei foi inserir o background-image manualmente para cada imagem. Exemplo:
<li><img src="images/banner_1.png" setimg="images/background_1jpg" /></li>
<li><img src="images/banner_2.png" setimg="images/background_2jpg" /></li>
Nisso, eu executaria um jQuery que pegasse o valor setimg
e aplicasse como fundo na div class="banner-backg"
. Mas não tenho muito conhecimento de como posso criar essa variável dentro da img
.