無(wú)法實(shí)現(xiàn)輪播
這是報(bào)錯(cuò)信息:
這是代碼:
<script>
????$(()=>{
????????console.log('頁(yè)面元素加載完執(zhí)行');
????????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的長(zhǎng)度之和就是content的寬度
????????var?contentWidth?=?outerWidth*listLength;//outerWidth就是之前所設(shè)置的list的寬度
????????var?style?=?document.styleSheets;//獲得頁(yè)面加載的樣式表
????????$marquee.css({
????????????"width":`${outerWidth}px`,
????????????"height":`${outerHeight}px`
????????});
????????$list.css({//content需要list來(lái)算
????????????"width":`${outerWidth}px`,
????????????"height":`${outerHeight}px`
????????});
????????$content.css({//content需要list來(lái)算
????????????"width":`${contentWidth}px`,
????????????"height":`${outerHeight}px`,
????????????//?"animation":`run?${speed*listLength}s?linear?infinite`
????????});
????????var?clone?=?$list.eq(0).clone();//選擇list列表里的第一個(gè)元素把它克隆下來(lái)放到content里面
????????$content.append(clone);
????????function?autoPlay(){
????????????initIndex++;
????????????//setTimeId鼠標(biāo)移動(dòng)上去就停止輪播
????????????setTimeId?=?setInterval(()=>{
????????????????$content.css({
????????????????????"transition":`transform?${transitionTime}s?ease`,
????????????????????"transform":`translateX(-${outerWidth*initIndex})`
????????????????})
????????????},speed*1000)
????????}
????????autoPlay()
????})
</script>
求指教
2020-03-22
嘗試一下在setInterval里打印一下outerWidth*initIndex是怎么變化的