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