jQuery+Css模仿带问题导航的图片切换结果

发布时间：2018-08-18 09:30:55 所属栏目：编程来源：站长网

导读：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>
提醒：可修改儿女码再运行!

（编辑：河北网）

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

MYSQL_框架之主从GTID	MySQL Online DDL的实
MySQL 5.7 mysqldumps	MySQL TEXT、DATE、SE