焦点图切换实现

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

简单需求:

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

你可能感兴趣的:(实现)