Javascript jquery背景图像更改淡出

我正在开发某种jquery滑块。它几乎是标准的NivoSlider，但我想用自己的控件更改基本图像

所以我有这样的想法：

HTML:

我有两个问题：
1.如何使它尽可能简单？
2.如何添加淡出/淡出效果以防止背景变化时图像“闪烁”？

这非常简单

步骤1.学习

第二步：不要按你现在的方式编码。你应该制作一个动态的幻灯片

在HTML中：

确保在循环时加载所有主映像源，即为每个thumb div分配数据bigimg属性，该属性等于主映像src的完整路径

$(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>

要显示的主图像的数据bigimg=“src”>
要显示的主图像的数据bigimg=“src”>
要显示的主图像的数据bigimg=“src”>

ok，明白了，但首先：这个解决方案不需要任何nivoslider js文件，所以我不再需要它了。但在Nivo中，图像之间有平滑的过渡（如不透明度或其他），我如何将其应用于我的代码？第二：我想在缩略图处于活动状态时更改其背景图像。我该怎么做呢？如果你知道如何编写自己的javascript，那么你不需要任何js…所有的转换都是可能的…在这种情况下…幻灯片将不可能…但是图像可以切换为淡入淡出…并获取一本关于javascript的好书。。

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

<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>