为了账号安全,请及时绑定邮箱和手机立即绑定

无法实现轮播

这是报错信息:

http://img1.sycdn.imooc.com//5e6277f10001170c05760165.jpg

这是代码:

<script>

    $(()=>{

        console.log('页面元素加载完执行');

        var outerWidth = 600,

            outerHeight = 400,

            speed = 3,

            transitionTime = 0.3,

            initIndex = 0,

            setTimeId = null;

        var $marquee=$('.marquee');

        var $content=$marquee.find('.content');

        var $list=$content.find('.list');

        var listLength = $list.length;//list的长度之和就是content的宽度

        var contentWidth = outerWidth*listLength;//outerWidth就是之前所设置的list的宽度

        var style = document.styleSheets;//获得页面加载的样式表

        $marquee.css({

            "width":`${outerWidth}px`,

            "height":`${outerHeight}px`

        });

        $list.css({//content需要list来算

            "width":`${outerWidth}px`,

            "height":`${outerHeight}px`

        });

        $content.css({//content需要list来算

            "width":`${contentWidth}px`,

            "height":`${outerHeight}px`,

            // "animation":`run ${speed*listLength}s linear infinite`

        });

        var clone = $list.eq(0).clone();//选择list列表里的第一个元素把它克隆下来放到content里面

        $content.append(clone);

        function autoPlay(){

            initIndex++;

            //setTimeId鼠标移动上去就停止轮播

            setTimeId = setInterval(()=>{

                $content.css({

                    "transition":`transform ${transitionTime}s ease`,

                    "transform":`translateX(-${outerWidth*initIndex})`

                })

            },speed*1000)

        }

        autoPlay()

    })


</script>

求指教

正在回答

1 回答

尝试一下在setInterval里打印一下outerWidth*initIndex是怎么变化的

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
带你走入前端动画的世界
  • 参与学习       29783    人
  • 解答问题       65    个

学习css3动画,并结合实际项目向大家展示应用技巧,使大家快速入门。

进入课程

无法实现轮播

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信