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
随手记
- ● JavaBridge.jar和Aspose.Cells安装及PHP将EXCEL导出PDF方法
- ● PHP批量删除所选内容的ID与参数加密冲突的解决方法【专用】
- ● PHP上传大文件二次确认对话框及loading显示防止假死状态【专用】
- ● DreamWeaver正则表达式将代码中的空白行删除
- ● mysql的慢查询日志记录什么
- ● js获取上传文件类型以及大小的方法
- ● windows系统如何查询openssl.cnf文件位置及更换路径
- ● SSL证书工具之CSR的作用是什么?
- ● [ssl:warn]SessionCacheisnotconfigured[hint:SSLSessionCache]原因
- ● servercertificatedoesNOTincludeanIDwhichmatchestheservername
PHP经验分享