JQex1:廣告輪播

練習六:廣告輪播

結果:

一、Html結構及CSS樣式

<div class="AD">
   <div class="on"><a href="#"><img src="img/movie/movie01.jpg" width="1000" height="500" alt=""/></a></div>
    <div><a href="#"><img src="img/movie/movie02.jpg" width="1000" height="500" alt=""/></a></div>
    <div><a href="#"><img src="img/movie/movie03.jpg" width="1000" height="500" alt=""/></a></div>
    <div><a href="#"><img src="img/movie/movie04.jpg" width="1000" height="500" alt=""/></a></div>
    <ul class="title">
        <li class="on"><h3>小小兵Minions</h3><p>Minions歡樂可愛,處處有梗!</p></li>
        <li><h3>超人特攻隊The Incredibles</h3><p>「超能先生」跟「彈力女超人」行俠仗義拯救世界。</p></li>
        <li><h3>天外奇蹟Up</h3><p>放下過去才能勇敢追夢。</p></li>
        <li><h3>玩具總動員Toy Story</h3><p>劇情緊湊毫無冷場,可以笑到流眼淚,也留下令人鼻酸感動熱淚</p></li>
    </ul>
</div>
*{padding:0; margin:0; font-family:"微軟正黑體";}
li {list-style: none;}
.AD{margin:0 auto; width:1000px; height:560px;}
.AD div { display: none;}
.AD .on { display: block;}
.AD .title { border-top: 2px solid #f6c;}
.AD .title li {
	cursor: pointer; float: left;
	width: calc(100% /4); height: 80px;
	box-sizing:border-box;
	background-color: #3e3e3e;
	border-right: 1px solid #000;
	padding: 5px;
}
.AD .title li.on, .bd .title li.over {
	background-color: #f6c;
	border-right: 1px solid #f6c;
}
.AD .title li h3 {
	font-size: 18px; color: #c90; padding-bottom: 6px;
}
.AD .title li p{
	font-size: 16px; color: #ccc;
}
.AD .title li.on h3, .AD .title .over h3, .AD .title li.on p, .AD .title .over p {
	color: #fff;}