JQ实现banner轮播图片的淡入淡出切换效果的代码

时间久了，看腻了李雷博客banner轮播图的切换效果，想换一种更加简单干净的效果，就想到了利用JQ来实现淡入淡出的切换效果，虽然少了一些动态效果却增强了动与静的结合，看上去清新简洁让人很舒服。顺便将实现的JQ+DIV的代码也分享一下，实际效果与李雷博客的banner轮播切换的效果是一致的。

HTML页面中DIV图层及图片的结构：

<div class="focus_box">
    <div id="focus_lx">
        <ul id="focus_lx_ul">
            <div id="focus_lx_li"><a href="https://www.mdaima.com/" target="_blank"><img src="/images/lx/3.jpg" alt="" width="1100" height="100" border="0"/></a></div>
            <div id="focus_lx_li"><a href="https://www.mdaima.com/jingyan/" target="_blank"><img src="/images/lx/1.jpg" alt="" width="1100" height="100" border="0" /></a></div>
        </ul>
    </div>
</div>

JQ实现淡入淡出切换效果代码：

<script>$.fn.imgtransition = function(o) {
    var defaults = {
      speed: 5000,
      animate: 1000
    };
    o = $.extend(defaults, o);
    return this.each(function() {
      var arr_e = $("div", this); //li
      arr_e.css({
        position: "absolute"
      });
      //arr_e.parent().css({margin: "0", padding: "0", "list-style": "none", overflow: "hidden"});
      function shownext() {
        var active = arr_e.filter(".active").length ? arr_e.filter(".active") : arr_e.first();
        var next = active.next().length ? active.next() : arr_e.first();
        active.css({
          "z-index": 9
        });
        next.css({
          opacity: 0.0,
          "z-index": 10
        }).addClass('active').animate({
          opacity: 1.0
        },
        o.animate,
        function() {
          active.removeClass('active').css({
            "z-index": 8
          });
        });
      }
      arr_e.first().css({
        "z-index": 9
      });
      setInterval(function() {
        shownext();
      },
      o.speed);
    });
  };
  $(document).ready(function() {
    $('#focus_lx').imgtransition({
      speed: 6000,
      //图片切换时间
      animate: 1200 //图片切换过渡时间
    });
  });</script>