Question

我正在研究某种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效果以防止图像在背景变化时“闪烁”？

Answer 1

这很简单。

步骤1.了解data attribute

第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.
     });
});

说明：

点击鼠标即可获得数据属性值。
现在您将此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>

jquery背景图像变化淡出

1 个答案: