jQuery城市地图鼠标经过标注显示文字介绍代码-精品资源网

jQuery城市地图鼠标经过标注显示文字介绍代码

一款鼠标经过地图城市标注显示文字详细介绍的jQuery城市地图标注代码，城市的设定根据自己的需要修改就行了。

JS代码

<script type=\"text/javascript\">
$(document).ready(function(){

	$(\".e_map_tags li\").mouseover(function(){
		$(this).addClass(\"centers\").siblings(\"li\").removeClass(\"centers\");
		var index=$(this).index();
		$(\".m_content\").eq(index).show().siblings(\".m_content\").hide();
	});
	//左右切换
	//点击左箭头
	$(\".m_left\").click(function(){
		//获取当前左切换 父亲的 index
		var sideindexL=$(this).parents(\".m_content\").index();
		//全部隐藏
		$(\".m_content\").hide();
		//父亲的上一个显示
		$(this).parents(\".m_content\").prev(\".m_content\").fadeIn();
		//地图对应index添加默认样式
		$(\".e_map_tags li\").eq(sideindexL-1).addClass(\"centers\").siblings(\"li\").removeClass(\"centers\");
		//当左切换为第一个时候  第一个显示
		if(sideindexL==0){
			$(\".m_content:first\").show();
			alert(\"前面没有了！\")
			$(\".e_map_tags li\").eq(0).addClass(\"centers\").siblings(\"li\").removeClass(\"centers\");
		}
	});
	
	//点击右箭头
	$(\".m_right\").click(function(){
	     //获取页面全部.m_content 的数量
		var sideindexR=$(this).parents(\".m_content\").index();
		$(\".m_content\").hide();
		$(this).parents(\".m_content\").next(\".m_content\").fadeIn();
		$(\".e_map_tags li\").eq(sideindexR+1).addClass(\"centers\").siblings(\"li\").removeClass(\"centers\");
		if(sideindexR==2){//这里的数字 是你地图的个数减去1
			$(\".m_content:last\").show();
			alert(\"最后一个了！\")
			$(\".e_map_tags li\").eq(sidelenAll).addClass(\"centers\").siblings(\"li\").removeClass(\"centers\");
		}
	});
	
});
</script>