遇见小小笑
2020-03-07 01:02
这是我的代码,js文件和css样式都是能用的,console.log里的内容都能输出,所以autoPlay函数是能够运行的,实在想不到是哪里的资源没下下来。(而且上一个课程的走马灯我也是能跑出来的)
```
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(()=>{
console.log('页面元素加载完执行');
var outerWidth = 600,
outerHeight = 400,
speed = 3,
transitionTime = .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`,
});
var clone = $list.eq(0).clone();//选择list列表里的第一个元素把它克隆下来放到content里面
$content.append(clone);
function autoPlay(){
console.log('函数开始');
initIndex++;
setTimeId = setInterval(()=>{
$content.css({
"transition":`transform ${transitionTime}s ease`,
"transform":`tanslateX(-${initIndex*outerWidth}px)`
})
},speed*1000)
console.log('函数末端');
}
autoPlay()
})
</script>
```
还没有人回答问题,可以看看其他问题
带你走入前端动画的世界
29782 学习 · 65 问题
相似问题
回答 3
回答 1