简洁的app图片展示选项卡切换布局html代码

使用jQuery制作的手机app截图介绍tab选项卡布局，多个app图片展示选项卡切换效果。这款tab切换的软件案例图文展示，鼠标悬停app图标显示对应的app截图效果。

方法调用

$(function() {
	var i = 0; //初始变量
	var k = 0; //初始变量
	var h = 5; //默认第一个内容条数
	//分类tap
	$('.industry').hover(function() {
		i = $(this).index(); //当前索引
		$(this).addClass('active').siblings().removeClass('active');
		$('.case-panel').eq(i).addClass('active').siblings().removeClass('active');
		h = $('.case-panel').eq(i).find('.image-hover').length; //获取内容条数
	})
	//内容tap
	$('.case-panel .image-hover').hover(function() {
		var j = $(this).index();
		var src = $(this).attr('data-qrcode'); //data-qrcode属性里面是二维码的图片
		var title = $(this).attr('data-title'); //标题
		var desc = $(this).attr('data-desc'); //描述
		$(this).addClass('active').siblings().removeClass('active');
		$(this).parents('.case-panel').find('.phone-image').eq(j - 1).addClass('active').siblings().removeClass('active');
		$(this).parents('.case-panel').find('.phone-image-cover').find('img').attr('src', src);
		$(this).parents('.case-panel').find('.case-head').text(title);
		$(this).parents('.case-panel').find('.case-text').text(desc);
		
	})
	//图片二维码
	$('.phone-framework').hover(function() {
		$(this).next('.phone-image-cover').removeClass('hidden');
	}, function() {
		$('.phone-image-cover').addClass('hidden');
	})
	//自动执行,间隔5秒
	setInterval(function() {
		$('.case-panel').eq(i).find('.image-hover').eq(k).addClass('active').siblings().removeClass('active');
		$('.case-panel').eq(i).find('.phone-image').eq(k).addClass('active').siblings().removeClass('active');
		k >= h - 1 ? k = 0 : k++;
	}, 5000)
})