課程
/前端開發
/JavaScript
/焦點圖輪播特效
list 為什么style 是left -600
2016-04-14
源自:焦點圖輪播特效 2-1
正在回答
因為第一張圖片在ul中是圖片5.要想顯示圖片1 ?就得把圖片5向左移動600px ? ? 你注意id="list"的div的width是4200px,而且是相對父級的定位。父級的位置不會動 。
首先,要知道父元素position:relative;子元素position:absolute的時候,子元素相對父元素定位。
container寬度只能容納一張圖片的寬度。list不設置寬度限制。所以圖片在list里面一字排開。
container設定為overflow:hidden;所以只要超出container就顯示不出來,看不到了。
然后再說為什么是-600不是其他。因為這里他設置的容器內圖片的順序為5,1,2,3,4,5,1
也就是把五張圖依次排開,然后首尾因為要循環,所以首尾各加上一張,首尾相連。
一開始你要是想要顯示1.jpg。那么就得把5.jpg排到容器外部的左側。所以定位是-600。
說的比較啰嗦。希望能看明白
因為不知道
舉報
通過本教程學習您將能掌握非常實用的焦點圖輪播特效的制作過程
2 回答求解答求解答
1 回答求解答求解答
1 回答求解求解答
3 回答求解答
1 回答求解答
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-05-23
因為第一張圖片在ul中是圖片5.要想顯示圖片1 ?就得把圖片5向左移動600px ? ? 你注意id="list"的div的width是4200px,而且是相對父級的定位。父級的位置不會動 。
2016-04-20
首先,要知道父元素position:relative;子元素position:absolute的時候,子元素相對父元素定位。
container寬度只能容納一張圖片的寬度。list不設置寬度限制。所以圖片在list里面一字排開。
container設定為overflow:hidden;所以只要超出container就顯示不出來,看不到了。
然后再說為什么是-600不是其他。因為這里他設置的容器內圖片的順序為5,1,2,3,4,5,1
也就是把五張圖依次排開,然后首尾因為要循環,所以首尾各加上一張,首尾相連。
一開始你要是想要顯示1.jpg。那么就得把5.jpg排到容器外部的左側。所以定位是-600。
說的比較啰嗦。希望能看明白
2016-04-14
因為不知道