jQuery+Css模拟带标题导航的图片切换效果

发布时间：2018-08-19 00:09:07 所属栏目：Asp教程来源：站长网

导读：jQuery +Css模拟带标题导航的图片切换效果，这里只所以给图片两个字加了引号，是解释为没有图片，而是使用了CSS层代替的，同时结合了强大的jQuery插件，给代码带来动感的切换效果，烈火网推荐您用于网站首页图文混排的内容切换形式，当然这里需要您有一定

　　jQuery+Css模拟带标题导航的“图片”切换效果，这里只所以给图片两个字加了引号，是解释为没有图片，而是使用了CSS层代替的，同时结合了强大的jQuery插件，给代码带来动感的切换效果，烈火网推荐您用于网站首页图文混排的内容切换形式，当然这里需要您有一定的HTML知识才可以进一步“开发”使用！

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

　　点击查看：网页特效

　　运行演示：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>jQuery+CSS模仿<b>搜狐视频</b>图片内容切换效果 - 烈火学院 VeryHuo.COM</title> <script type="text/javascript" src="/uploads/common/js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function(){ auto(); animates(); }) var i = -1; var offset = 2500; var timer = null; function auto(){ var n = $("li").length-1; i++; if(i > n){ i = 0; } slide(i); timer = window.setTimeout(auto, offset); } function slide(i){ $(".block:animated").stop(false,true); $(".block").animate({top: -300*i+"px"}); $(".li" + i).addClass("curr").siblings().removeClass("curr"); } function animates(){ $("li").each(function(){ $(this).hover(function(){ var num = $(this).index(); if(timer){ clearTimeout(timer); i = $(this).prevAll().length; slide(i); $(this).addClass("curr").siblings().removeClass("curr"); $(".block").animate({top: -300*num+"px"}); } },function(){ timer = window.setTimeout(auto, offset); $(".block").dequeue(); }) }) $(".block").hover(function(){ clearTimeout(timer); },function(){ timer = window.setTimeout(auto, offset); }) } </script> <style> *{margin:0;padding:0} .wrap {width:500px;height:300px;margin:50px auto;border:1px solid #ccc;overflow:hidden;position:relative} ul,li{list-style:none} ul {float:left;width:100px} li {height:30px;line-height:30px;background:#ccc;border-bottom:1px solid #fff} li.curr {background:#f90} .block {width:390px;position:absolute;right:0;} .box {width:390px;background:#ccc;height:300px;} </style> </head> <body> <div class="wrap"> <ul> <li class="li0">1</li> <li class="li1">2</li> <li class="li2">3</li> <li class="li3">4</li> <li class="li4">5</li> </ul> <div class="block"> <div class="box" style="background:#A0A0A4">1</div> <div class="box" style="background:#FFBFFF">2</div> <div class="box" style="background:#55DFAA">3</div> <div class="box" style="background:#AA9FAA">4</div> <div class="box" style="background:#7FBF55">5</div> </div> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：PHP编程网 - 黄冈站长网）

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