无法实现轮播
这是报错信息:
这是代码:
<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>
求指教