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


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

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

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

      

  • 相关阅读:
    设计模式总结
    centos7.5 安装python3.7
    搭建yum软件源
    centos安装gitbook
    编译技术
    samba安装
    docker命令
    shell基础知识
    随笔
    虚拟机字节码执行引擎(三)
  • 原文地址:https://www.cnblogs.com/wyongz/p/11093233.html
Copyright © 2020-2023  润新知