js代码
<script src="statics/js/jquery.min.js"></script> <script type="text/javascript"> $(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) }) </script>