Page content and linkage map display carousel

Recently made a page in there carousel map, but other parts of the page you want and Carousel Figure linkage, and map carousel to a position when the carousel displays the information content of the current carousel figure corresponding and carousel content map to zoom

 

I realize the process is relatively rough, do the next record on this, see if the god who feel there is something wrong please correct me

First, the use css3 animate

　　

@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%);
    }
    
}

But css3 animation is relatively simple in terms of realization, but the function is relatively small, we must first zoom carousel figure can not find the time to reduce operating elements, the second part is the linkage nor the opportunity to achieve, so use css3 achieve this final I gave up being

Two, jquery animation to achieve

　　Using jquery animation to achieve so we are more familiar with the use of the animate jquery to achieve, then start using recursive animation when the animation is complete, but will not change the state, behind become realized through the chain, but flexibility too small, time if the number of carousel figure changes to modify the code too much

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)
}

Third, use the index in conjunction with the top ways were optimized to expand the functionality of this flexibility

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) + 'room' )
        setTimeout(() => {
            $('#detailcontent p').slideUp(500, function () {
                $('#detailcontent p').slideDown(500, function () {
                })
            })
        }, 1500);
    })
}, 2000)

Because I was a display of three li so I put three fake li, so that the situation does not appear misplaced. Whether the moving to the final judgment animated by the index, if withdrawn directly to the starting position, and render in part through linkage index, li animation content is achieved by adding the class name and the transition

 

　　

Reproduced in: https: //www.cnblogs.com/wyongz/p/11093233.html