[問題] 試做廣告旋轉木馬效果

作者: cgcat (小綿羊趕集)   2014-09-22 14:46:16
我要試做一個廣告旋轉木馬的效果
目前先用css再排板,但卻遇到一個問題
我的效果是這樣的,一組推薦模組有四張圖片當滑鼠移過
最右邊的圖片會出現next的箭頭圖片,最左邊則會有prev的箭頭圖片作為btn
因為必須要將箭頭圖片壓在推薦的圖片上面
所以我在推薦圖片的wrap下了position:absolute;這樣箭頭才可以壓在上層
但是因為下了position:absolute;之後下方的footer就會無視推薦模組的高度
不會排序在推薦模組下,變成footer與推薦重疊
有什麼方法可以解決這樣的狀況讓footer會排序在推薦後面呢?
以下是我的code,謝謝各位高手
http://jsfiddle.net/y1hysheh/
作者: mmis1000 (秋月戀楓)   2014-09-22 18:56:00
圖片404阿...根本看不懂
作者: crown (Crown)   2014-09-23 01:40:00
我是後端工程師,但是這種前端工作我也做N次了
作者: Canboo (啃布先生)   2014-09-23 08:23:00
clear:auto或hidden
作者: leochen0818 (Leo)   2014-09-23 11:10:00
要放在後面的元素設定clear: both就可以了不過通常該區塊會先用一塊div包起來並且設定position: relative再在該區塊進行其他設定,就不會影響到後面的區塊
作者: aspdoctor (大崎)   2014-09-23 14:13:00
原來這個中文叫旋轉木馬
作者: leochen0818 (Leo)   2014-09-23 15:37:00
其實有好多種說法耶!就連英文也有各家自己的名稱
作者: yyc1217 (somo)   2014-09-23 20:17:00
基本上都叫carousel

Links booklink

Contact Us: admin [ a t ] ucptt.com