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.19jp.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.19jp.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>

以上就是JQ实现banner轮播图片的淡入淡出切换效果的代码的详细内容，更多关于JQ实现banner轮播图片的淡入淡出切换效果的代码的资料请关注九品源码其它相关文章！