jQuery底部带导航的图片切换，上下滚动效果

发布时间：2018-08-16 21:13:12 所属栏目：Asp教程来源：站长网

导读：jQuery 实现图片底部带导航的幻灯片切换代码，在切换时有上下滚动效果，并且当鼠标滑动经过底部的导航按钮时，图片就会切换，也可以叫做滑动式图片切换，还有图片的文字说明标题，聪明的你一看就知道这是翻译自国外网站的代码。为解决一些网页特效运行后

　　jQuery实现图片底部带导航的幻灯片切换代码，在切换时有上下滚动效果，并且当鼠标滑动经过底部的导航按钮时，图片就会切换，也可以叫做滑动式图片切换，还有图片的文字说明标题，聪明的你一看就知道这是翻译自国外网站的代码。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。

　　点击查看：网页特效

　　运行演示：

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>jQuery上下滚动效果的图片切换_烈火学院VERYHUO.COM</title> <script src="/uploads/common/js/jquery-1.4.2.min.js" type="text/javascript"></script> <script> //作者：刘晓帆 $(function(){ var lxfscroll_ul = $(".lxfscroll ul"); var lxfscroll_li = $(".lxfscroll li"); var lxfscroll_tli = $(".lxfscroll-title li"); var lxfscroll_speed = 350;//切换的速度 var lxfscroll_autospeed = 2000;//自动播放的速度 var lxfscroll_n = 0; var lxfscroll_imgheight = $(".lxfscroll li img").attr("height");//获取图片高度 var lxfscroll_lilength = lxfscroll_li.length;//获取图片数量 var lxfscroll_timer; var lxfscroll_alt = $(".lxfscroll-alt"); /* 标题按钮事件 */ function lxfscroll() { lxfscroll_tli.mouseenter(function(){ var lxfscroll_index = lxfscroll_tli.index($(this)); var lxfscroll_lipoint = lxfscroll_index*lxfscroll_imgheight; var lxfscroll_imgTitle = $(".lxfscroll li img").eq(lxfscroll_index).attr("alt"); lxfscroll_alt.text(lxfscroll_imgTitle); lxfscroll_tli.removeClass("cur"); $(this).addClass("cur"); lxfscroll_ul.stop(true,false).animate({"top":-lxfscroll_lipoint+"px"},lxfscroll_speed); }); }; /* 自动轮换 */ function lxfscroll_autoroll() { if(lxfscroll_n >= lxfscroll_lilength) {lxfscroll_n = 0;} var lxfscroll_lipoint = lxfscroll_n*lxfscroll_imgheight; var lxfscroll_imgTitle = $(".lxfscroll li img").eq(lxfscroll_n).attr("alt"); lxfscroll_ul.stop(true,false).animate({"top":-lxfscroll_lipoint+"px"},lxfscroll_speed); lxfscroll_tli.removeClass("cur").eq(lxfscroll_n).addClass("cur"); lxfscroll_alt.text(lxfscroll_imgTitle); lxfscroll_n++; lxfscroll_timer = setTimeout(lxfscroll_autoroll, lxfscroll_autospeed); }; /* 鼠标悬停即停止自动轮换 */ function lxfscroll_stoproll() { lxfscroll_li.hover(function() { clearTimeout(lxfscroll_timer); lxfscroll_n = $(this).prevAll().length+1; }, function() { lxfscroll_timer = setTimeout(lxfscroll_autoroll, lxfscroll_autospeed); }); lxfscroll_tli.hover(function() { clearTimeout(lxfscroll_timer); lxfscroll_n = $(this).prevAll().length+1; }, function() { lxfscroll_timer = setTimeout(lxfscroll_autoroll, lxfscroll_autospeed); }); }; lxfscroll(); lxfscroll_autoroll();lxfscroll_stoproll();//启动自动播放功能 }); </script> <style type="text/css"> * { font-size:12px; color:#333; text-decoration:none; padding:0; margin:0; list-style:none; font-style: normal; font-family: Arial, Helvetica, sans-serif; } .lxfscroll { width:400px; margin-left:auto; margin-right:auto; margin-top: 20px; position: relative; height: 300px; border: 4px solid #EFEFEF; overflow: hidden; } .lxfscroll ul li { height: 300px; width: 400px; text-align: center; line-height: 300px; font-size: 40px; font-weight: bold; background-color: #CCC; float: left; } .lxfscroll-title { width: 400px; margin-left: auto; margin-right: auto; } .lxfscroll-title li { float: left; line-height: 20px; text-align: center; border: 1px dashed #CCC; margin-top: 2px; cursor: pointer; margin-right: 2px; padding: 8px; } .cur { color: #FFF; font-weight: bold; background:#000; } .lxfscroll ul { position: absolute; } .lxfscroll-alt { position: absolute; bottom: 0px; z-index: 5; background-color: #666; width: 384px; color: #FFF; padding: 8px;Opacity=80);-moz-opacity:0.5;opacity: 0.5; } </style> </head> <body> <div class="lxfscroll"> <div class="lxfscroll-alt">图标文字标题</div> <ul><li><img src="/uploads/common/images/wall2.jpg" width="400" height="300" alt="Koala"/></li><li><img src="/uploads/common/images/wall6.jpg" width="400" height="300" alt="Lighthouse"/></li><li><img src="/uploads/common/images/wall3.jpg" width="400" height="300" alt="Penguins"/></li><li><img src="/uploads/common/images/wall4.jpg" width="400" height="300" alt="Tulips"/></li></ul> </div> <div class="lxfscroll-title"> <ul> <li class="cur">Koala</li> <li>Lighthouse</li> <li>Penguins</li> <li>Tulips</li> </ul> </div> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：南京站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

VB.net 查询获取数据库	内容添加asp.net
c#中过滤html的正则表	ASP.NET中实现中文简/