Re: [問題] 如何把這個改成RWD？

看板Web_Design作者nottt (無)時間8年前 (2016/12/03 02:16)推噓0(0推 0噓 2→)

留言2則, 1人參與討論串2/2 (看更多)

半夜睡不著試了一下，看有沒有高手提出更好的解法 https://jsfiddle.net/uqe6s8n2/ 思考方向： ‧div#slideshow的高度會變動原始範例的jquery，是將第一個div淡出、第二個淡入，然後把第一個塞到最後面故div的順序會變動 ‧圖片高度會變動原始範例利用固定高度(height:240px)和溢位隱藏(overflow: hidden) 避免圖片高度超過版面的問題解決方式：每次div順序被調整後，就把#slideshow的高度設定成第一個div下的圖片高度 $('#slideshow').css("height", $('#slideshow > div:first>img').height()); 優點：原始範例基本上不需要改動，只要補上計算用的js就搞定了缺點：如果很喜歡拉螢幕視窗的話，在js被觸發前高度都不會被重新計算 ※ 引述《virgin7 ()》之銘言： : 大家晚安 : 對RWD一直有個疑問，請看這個範例：https://jsfiddle.net/t79o7rqy/ : 一個簡單的幻燈片效果，如果要改成RWD : 例如把 #slideshow 固定寬高改成 width: 50%; height: auto; : 問題來了: : 1.#slideshow高度設成auto或不設高度，會因為裡頭div設了絕對定位而變成高度為零 : 就看不到任何圖片了！如果設一個固定高度，RWD的寬度變動時高度卻固定 : 　效果就不對（不懂意思可以拉動視窗試試） : 2.要如何在幻燈片寬高自動變動下，底下的＂內容內容內容＂文字能貼著幻燈片區塊 : 　因為slide中的圖片都用絕對定位 : 　那底下的＂內容內容＂就會往上跑而不能貼著幻燈片下方了 : 以上，感謝前輩們指導，其實類似問題常出現，希望能知道怎麼做才好，感思～ : 範例出處： : https://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/ -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 218.187.100.126 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1480702588.A.4BA.html