jQuery鼠标悬停气泡文字信息切换展示代码

jQuery鼠标悬停气泡文字信息内容切换展示代码，默认文字信息自动切换展示，当鼠标悬停气泡时气泡放大并切换到相应文字信息内容。

分类：文字特效 > 文字切换难易：中级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

js代码

<script type="text/javascript">
$(function(){
	$(".superli ul li").mouseover(function(){
		$(this).addClass('superhover').siblings().removeClass('superhover');
		var index = $(this).index();
		number = index;
		$('.supert').hide();
		$('.supert:eq('+index+')').show();
	});
	
	var auto = 1;  //等于1则自动切换，其他任意数字则不自动切换
	if(auto ==1){
		var number = 0;
		var maxNumber = $('.superli ul li').length;
		function autotab(){
			number++;
			number == maxNumber? number = 0 : number;
			$('.superli ul li:eq('+number+')').addClass('superhover').siblings().removeClass('superhover');
			$('.supert:eq('+number+')').show().siblings().hide();
		}
		var tabChange = setInterval(autotab,3000);
		//鼠标悬停暂停切换
		$('.superli').mouseover(function(){
			clearInterval(tabChange);
		});
		$('.superli').mouseout(function(){
			tabChange = setInterval(autotab,3000);
		});
	  }
});	
</script>