<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>jQuery常用焦点图，可做选项卡切换</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</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>
    </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>
 
<span style=" display:none;">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-28967705-1']);
_gaq.push(['_setDomainName', 'daqianduan.com']);
_gaq.push(['_trackPageview']);
(function() {
 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</span>
</body>
</html>