焦点图切换实现

今天国庆第三天休息，下雨没出门，改了公司一个焦点图切换效果。

简单需求：

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/ 查看。

posted @ 2011-10-03 16:31  radom  阅读(2823)  评论(0)    收藏  举报