页面内容与轮播图的显示联动

最近做了个页面中有轮播图，但是页面中的其他部分要和轮播图进行联动，及轮播图轮播到一个位置的时候显示当前轮播图的内容对应的信息，并且轮播图的内容进行缩放

 

我的实现过程比较坎坷，在此做下记录，如果哪位大神看到感觉有什么错误欢迎指正

一、使用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中内容的动画是通过添加类名及过渡实现的