最近做了个页面中有轮播图,但是页面中的其他部分要和轮播图进行联动,及轮播图轮播到一个位置的时候显示当前轮播图的内容对应的信息,并且轮播图的内容进行缩放
我的实现过程比较坎坷,在此做下记录,如果哪位大神看到感觉有什么错误欢迎指正
一、使用css3实现动画
@keyframes switch { 0%,16.6%{ transform: translateX(0); } 16.6%, 33.3% { transform: translateX(-16.6%); } 50%, 66.6% { transform: translateX(-33.3%); } 83%,100% { transform: translateX(-50%); } }
但是css3动画在实现方面比较简单,但是功能比较小,首先要进行轮播图中的放大缩小不能找到时机去操作元素,第二就是联动的部分也没有时机去实现,所以用css3实现这个功能最后被我放弃了
二、jquery的动画实现
使用jquery的动画实现比较熟悉所以就使用了jquery的animate去实现,开始使用的递归在动画完成时再进行动画,但是会出现状态不好改变,后边通过链式变成实现的,但是灵活性太小了,如果轮播图的数量变化的时候要修改的代码太多
function animateloop() { $('#lightslider').animate({ marginLeft: "0" }, 0, 'linear', function () { //第二个放大 $('#lightslider li').eq(1).addClass('active').siblings().removeClass('active') setTimeout(() => { $('#detailcontent p').slideUp(1000,function(){ $('#detailcontent p').html('第三机房') $('#detailcontent p').slideDown(500,function(){ }) }) }, 1500); }).delay(1000).animate({ marginLeft: l }, 1500, 'linear', function () { //第三个放大 $('#lightslider li').eq(2).addClass('active').siblings().removeClass('active') setTimeout(() => { $('#detailcontent p').slideUp(1000,function(){ $('#detailcontent p').html('第四机房') $('#detailcontent p').slideDown(400,function(){ }) }) }, 1500); // console.log(1) }).delay(1000).animate({ marginLeft: l1 }, 1500, 'linear', function () { //第四个放大 $('#lightslider li').eq(3).addClass('active').siblings().removeClass('active') setTimeout(() => { $('#detailcontent p').slideUp(1000,function(){ $('#detailcontent p').html('第五机房') $('#detailcontent p').slideDown(400,function(){ }) }) }, 1500); // console.log(2) }).delay(1000).animate({ marginLeft: l2 }, 1500, 'linear', function () { //第五个放大 $('#lightslider li').eq(4).addClass('active').siblings().removeClass('active') setTimeout(() => { $('#detailcontent p').slideUp(1000,function(){ $('#detailcontent p').html('第六机房') $('#detailcontent p').slideDown(400,function(){ }) }) }, 1500); // console.log(3) }).delay(1000).animate({ marginLeft: l3 }, 1500, 'linear', function () { //第六个放大 $('#lightslider li').eq(5).addClass('active').siblings().removeClass('active') setTimeout(() => { $('#detailcontent p').slideUp(1000,function(){ $('#detailcontent p').html('第七机房') $('#detailcontent p').slideDown(400,function(){ }) }) }, 1500); // console.log(4) }).delay(1000).animate({ marginLeft: l4 }, 1500, 'linear', function () { //第七个放大 $('#lightslider li').eq(6).addClass('active').siblings().removeClass('active') setTimeout(() => { $('#detailcontent p').slideUp(1000,function(){ $('#detailcontent p').html('第一机房') $('#detailcontent p').slideDown(400,function(){ }) }) }, 1500); // console.log(5) }).delay(1000).animate({ marginLeft: l5 }, 1500, 'linear', function () { //第一个放大 $('#lightslider li').eq(7).addClass('active').siblings().removeClass('active') setTimeout(() => { $('#detailcontent p').slideUp(1000,function(){ $('#detailcontent p').html('第二机房') $('#detailcontent p').slideDown(400,function(){ }) }) }, 1500); // console.log(6) animateloop() }).delay(2000) }
三、使用索引的方式结合上边的方法进行了优化,扩大了这个功能的灵活性
var count = 0; var banner = $('#leftarticle .banner').eq(0) var leftliwidth = -banner.width() / 3; //轮播图中的li的个数 var leftlicount = $('#leftarticle .banner li').length $('#lightslider li').eq(count + 1).addClass('active').siblings().removeClass('active') $('#detailcontent p').html('第' + (2 + count) + '机房') setTimeout(() => { $('#detailcontent p').slideUp(500, function () { $('#detailcontent p').slideDown(500, function () { }) }) }, 1500); setInterval(function () { // console.log(count) if (count == leftlicount - 3) { $('#leftarticle .banner ul').css('left', 0) count = 0 } count++ $('#leftarticle .banner ul').animate({ left: leftliwidth * count }, 1000, 'linear', function () { $('#lightslider li').eq(count + 1).addClass('active').siblings().removeClass('active') $('#detailcontent p').html('第' + (2 + count) + '机房') setTimeout(() => { $('#detailcontent p').slideUp(500, function () { $('#detailcontent p').slideDown(500, function () { }) }) }, 1500); }) }, 2000)
因为我的是一次显示三个li的所以我放了三个假的li,这样就不会出现错位的情况了。通过索引判断是否运动到最后的动画了,如果到了就直接抽回起始位置,并通过索引对联动的部分进行渲染,li中内容的动画是通过添加类名及过渡实现的