焦点图切换实现
今天国庆第三天休息，下雨没出门，改了公司一个焦点图切换效果。
简单需求：
1、文字与大图对应自动切换
2、鼠标点文字时，大图对应改变
3、鼠标在文字或大图上时，停止自动切换效果，移开时又恢复自动切换
4、没了，就这么简单，不搞复杂，实用就好
相关代码如下：只有简单结构样式，要好看自个可修改结构样式。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Dom</title>
<style>
html,body,ol,li{margin:0;padding:0;}
li{list-style:none;}
#homeFocusBig{height:413px;overflow:hidden;}
#homeFocusBig li{display:none;background:red;height:413px;}
#homeFocusBig .current{display:block;}
#homeFocusTxt{width:998px;height:40px;overflow:hidden;}
#homeFocusTxt ul{width:1000px;}
#homeFocusTxt li{width:198px;overflow:hidden;float:left;line-height:40px;text-align:center;background:#9F9F9C;border-right:2px solid white;cursor:pointer;}
#homeFocusTxt .current{background:#6D6D6C;font-weight:bold}
#homeFocusTxt li a{color:white;}
</style>
</head>
<body>
<ol id="homeFocusTxt">
<li class="current">html</li>
<li>css</li>
<li>dom</li>
</ol>
<ol id="homeFocusBig">
<li class="current">html</li>
<li>css</li>
<li>dom</li>
</ol>
<script src="jquery-1.4.2.min.js" ></script>
<script>
auto();//默认调自动切换涵数
$('#homeFocusTxt li').mouseover(function(){//鼠标在文字上时控制焦点切换
clearInterval(clearAuto);//清除自动切换
var idt = $('#homeFocusTxt li').index(this);
$(this).addClass('current').siblings('li').removeClass('current');
$('#homeFocusBig li').eq(idt).fadeIn('fast').siblings('li').fadeOut('fast');
});
//鼠标移开文字范围时调用自动切换
$('#homeFocusTxt li').mouseout(function(){
auto();
});
//鼠标在大图上时停止自动切换
$('#homeFocusBig li').hover(function(){
clearInterval(clearAuto);
},function(){
auto();//鼠标移开大图上时调用自动切换
});
//自动切换事件
function autoFun(){
var idtAuto = $('#homeFocusTxt li.current,#homeFocusBig li.current').index();
$('#homeFocusTxt li,#homeFocusBig li').removeClass('current');
if( idtAuto == 2 ){
idtAuto = -1
}
var nub = ++idtAuto
$('#homeFocusTxt li').eq(nub).addClass("current");
$('#homeFocusBig li').eq(nub).fadeIn('fast').siblings('li').fadeOut('fast');
}
//自动切换涵数
function auto(){
clearAuto = setInterval(autoFun,5000);
}
</script>
</body>
</html>
要具体效果猛点击http://www.phocl.com/ 查看。
