欢迎您来到,码代码-李雷博客        登录  |  注册

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

更新:2022-06-06 08:51:25
人气:82
来源:本站原创
A+

时间久了,看腻了李雷博客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>



推荐的文章
# 发表我的评论
  /     /  
# 最近评论
暂时还没有评论,要不要说点什么?
  Ads by Google
  联系博主
Hello,本博客系统采用PHP和MySql开发,程序开发完全是因为个人爱好,是自己纯手写PHP源代码,未采用任何PHP框架!
QQ:858353007   微信号:lileihot123
网站地图
会员服务
关于我们
QQ:858353007
 
广告服务
加我微信
移动端访问
 
 
Copyright © 2014- 2022 www.mdaima.com All Rights Reserved.
李雷博客,专注PHP经验、PHP教程及PHP源代码开源下载分享的PHP博客!   ICP备案号:京ICP备10202169号