摘抄一则新闻_公司网站建设是哪个部门的事情?_武汉软件测试培训机构排名_百度浏览器网址大全

<div class="fixed-width"><div class="tab"><span class="tab-item active">tab1</span><span class="tab-item">tab2</span></div><div class="img-change img1"></div><div class="img-change img2" style="right: -1200px"></div>
</div>

.fixed-width {width: 1200px;height: 700px;margin: 0 auto;box-sizing: border-box;position: relative;overflow: hidden;
}
.fixed-width .tab {height: 60px;line-height: 60px;width: 1200px;
}
.fixed-width .tab span {display: inline-block;width: 120px;text-align: center;font-size: 16px;font-weight: 600;cursor: pointer;
}
.fixed-width .tab span.active {color: #CF000D;border-bottom: 3px solid #CF000D;
}
.fixed-width .img-change {position: absolute;bottom: 0;width: 1200px;height: 250px;
}
.img1 {background-image: url(../img/img1.png);background-repeat: no-repeat;background-size: 100% 49%;background-position: 0 40px;
}
.img2 {background-image: url(../img/img2.png);background-repeat: no-repeat;background-size: 100% 40%;background-position: 0 40px;
}

var timer = null // 定时器// 点击tab切换内容
$('.tab-item').on('click',function() {$('.tab-item').each(function () {$(this).removeClass('active')})$(this).addClass('active')if($(this).index() == 1) {// 水平移动两张图片$('.img-change.img1').animate({ right: '1200px' }, 500)$('.img-change.img2').animate({ right: '0' }, 500)} else {$('.img-change.img1').animate({ right: '0' }, 500)$('.img-change.img2').animate({ right: '-1200px' }, 500)}// 重置定时器clearInterval(timer);timer = setInterval(switchToNextTab, 30000);
})// 自动切换tab
function switchToNextTab() {var $activeTab = $('.tab-item.active'); // 当前活动标签var $tabs = $('.tab-item'); // 所有标签var currentIndex = $activeTab.index(); // 当前索引var nextIndex = (currentIndex + 1) % $tabs.length; // 下一个索引// 切换标签$activeTab.removeClass('active')$tabs.eq(nextIndex).addClass('active')// 切换内容if(nextIndex == 1) {$('.img-change.img1').animate({ right: '1200px' }, 500)$('.img-change.img2').animate({ right: '0' }, 500)} else {$('.img-change.img1').animate({ right: '0' }, 500)$('.img-change.img2').animate({ right: '-1200px' }, 500)}
}timer = setInterval(switchToNextTab, 30000);