当前位置：首页 → 问答吧 → jQuery常用焦点图，可做选项卡切换

jQuery常用焦点图，可做选项卡切换

时间：2010-06-06

来源：互联网

今天早上没什么事儿，就整了个jquery效果，就叫jQuery 常用焦点图，可做选项卡切换！

这段jquery代码功能比较多，像焦点图、选项卡、文字定时切换等等！

下面是焦点图的效果图：

演示demo：http://www.daqianduan.com/demo/scroll-commom.html

原文：http://www.daqianduan.com/jquery-focus-switch-tab/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>代码运行-大前端</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="http://img.daqianduan.com/ui/favicon.ico" rel="shortcut icon"> <link type="text/css" rel="stylesheet" href="http://www.daqianduan.com/demo/css/common.css" /> <script type="text/javascript" src="http://www.daqianduan.com/demo/script/jquery142min.js"></script> </head> <body> <h2><a href="http://www.daqianduan.com/" tittle="大前端-web前端开发">大前端</a></h2> <h1>jQuery常用焦点图，可做选项卡切换</h1> <style type="text/css"> .demo{ width:640px; height:200px; position:relative; overflow:hidden; border:#ddd 1px solid;padding:5px;} .num{ position:absolute;right:10px; top:10px; z-index:10;} .num a{ width:16px; height:16px; display:inline-block; text-align:center; margin:0 3px; cursor:pointer;} .num a.cur{ background:#ff6700;color:#fff;} .demo ul{ position:relative; z-index:5;} .demo ul li{ position:absolute; display:none;} </style> <div class="demo"> <div class="num"><a class="cur">1</a><a>2</a><a>3</a></div> <ul> <li style="display:block;"><a href="http://www.daqianduan.com/web-design-30-html5/" target="_blank"><img src="http://www.daqianduan.com/wp-content/uploads/2010/06/html5.png" /></a></li> <li><a href="http://www.daqianduan.com/wp-content/uploads/2010/06/ipad.png" target="_blank"><img src="http://www.daqianduan.com/wp-content/uploads/2010/06/ipad.png" /></a></li> <li><a href="http://www.daqianduan.com/css-efficiency-browsers-render-speed/" target="_blank"><img src="http://www.daqianduan.com/wp-content/uploads/2010/06/css.jpg" /></a></li> </ul> </div> <script type="text/javascript"> $(function(){ var sw = 0; $(".demo .num a").mouseover(function(){ sw = $(".num a").index(this); myShow(sw); }); function myShow(i){ $(".demo .num a").eq(i).addClass("cur").siblings("a").removeClass("cur"); $(".demo ul li").eq(i).stop(true,true).fadeIn(600).siblings("li").fadeOut(600); } //滑入停止动画，滑出开始动画 $(".demo").hover(function(){ if(myTime){ clearInterval(myTime); } },function(){ myTime = setInterval(function(){ myShow(sw) sw++; if(sw==3){sw=0;} } , 3000); }); //自动开始 var myTime = setInterval(function(){ myShow(sw) sw++; if(sw==3){sw=0;} } , 3000); }) </script> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 race 于 2010-6-6 08:09 编辑 ]

作者: race 发布时间: 2010-06-06

原文：http://www.daqianduan.com/jquery-focus-switch-tab/

作者: race 发布时间: 2010-06-06