課程
/前端開發(fā)
/JavaScript
/焦點圖輪播特效
我嘗試了一下,如果寫在<style></style>中,就無法做出效果來。好奇怪好奇怪。
2016-07-27
源自:焦點圖輪播特效 3-1
正在回答
臥槽,不好意思,看錯了題目。老師的源代碼有一句,var left = parseInt(list.style.left) + offset;element.style,只能獲取到元素內(nèi)部樣式,也就是寫在元素標(biāo)簽內(nèi)的樣式,所以你寫在其他地方的樣式是對他來說是不可讀的。另外你想要獲取到不論是外部還是內(nèi)部的樣式,那么就需要使用getComputedStyle(ele, false)[style]。
臥槽,不好意思,看錯了題目。
老師的源代碼有一句,var left = parseInt(list.style.left) + offset;
element.style,只能獲取到元素內(nèi)部樣式,也就是寫在元素標(biāo)簽內(nèi)的樣式,
所以你寫在其他地方的樣式是對他來說是不可讀的。
另外你想要獲取到不論是外部還是內(nèi)部的樣式,
那么就需要使用getComputedStyle(ele, false)[style]。
4 (0 1 2 3 4)0
需要被展示的圖片是5張,而我們想要做到令人舒適的視覺,那么就需要在首(0)、尾(4)分別加上尾(4)、首(0)的圖片,實現(xiàn)無縫的切換效果。一般圖片播放順序是第一張到最后一張,而document.getElementById("list").children[0](說明:也就是實際上的第一張圖片)實際上顯示的是第五張的圖片,然而我們需要從顯示第一張圖片的img元素開始循環(huán),所以我們要從document.getElementById("list").children[1]出發(fā)。而一個img元素的寬度(width)是600px,所以整個document.getElementById("list"),就需要左移600px,答案就是left:-600px。
需要被展示的圖片是5張,而我們想要做到令人舒適的視覺,
那么就需要在首(0)、尾(4)分別加上尾(4)、首(0)的圖片,實現(xiàn)無縫的切換效果。
一般圖片播放順序是第一張到最后一張,
而document.getElementById("list").children[0]
(說明:也就是實際上的第一張圖片)實際上顯示的是第五張的圖片,
然而我們需要從顯示第一張圖片的img元素開始循環(huán),
所以我們要從document.getElementById("list").children[1]出發(fā)。
而一個img元素的寬度(width)是600px,所以整個document.getElementById("list"),
就需要左移600px,答案就是left:-600px。
首先你必須確保將這個left:-600px;放到<script></script>里面
舉報
通過本教程學(xué)習(xí)您將能掌握非常實用的焦點圖輪播特效的制作過程
4 回答求助:為什么style=“left:-600px”;要寫在行內(nèi)才起作用呢?而寫到css樣式表中就不可以。。。
2 回答為什么把left改成正600px整個list消失不見了???
3 回答我想知道初始值left = -600px,那個-600px是什么意思
2 回答把js代碼寫到新建的js文件里,那在html中href那里該怎么寫?
4 回答同問,為什么left:-600px;寫進css里,那個右箭頭沒有反應(yīng)了啊
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網(wǎng)安備11010802030151號
購課補貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號
2016-08-04
2016-08-04
2016-07-27
首先你必須確保將這個left:-600px;放到<script></script>里面