特效描述:原生js 濾鏡效果 焦點圖片切換,網站首頁圖片切換Jquery特效鏡效果的焦點圖片切換代碼
代碼結構
1. 引入CSS
<link href="css/index.css" rel="stylesheet" type="text/css" />
2. 引入JS
<script src="js/banner.js" type="text/javascript"></script>
3. HTML代碼
<div id="myFocus" class="mF_liuzg"> <div class="loading"><span>請稍候...</span></div> <ul class="pic"> <li> <a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/1.jpg"/></a> <span class="txt-bg"><a href="http://www.dijiuzhanzhang.com/" target="_blank">“快男”突圍賽雙直播奪全國冠軍 年輕觀眾市場遙遙領先</a></span> </li> <li> <a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/2.jpg"/></a> <span class="txt-bg"><a href="http://www.dijiuzhanzhang.com/" target="_blank">李宇春再登雜志封面 黑白大片演繹春式時尚</a></span> </li> <li> <a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/3.jpg"/></a> <span class="txt-bg"><a href="http://www.dijiuzhanzhang.com/" target="_blank">劉忻新書《隨忻所遇》簽售會即將啟動</a></span> </li> <li> <a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/4.jpg"/></a> <span class="txt-bg"><a href="http://www.dijiuzhanzhang.com/" target="_blank">曾軼可《會飛的賊》MV獨家首播 解讀暗戀心事</a></span> </li> <li> <a href="http://www.dijiuzhanzhang.com/" target="_blank"><img src="images/5.jpg"/></a> <span class="txt-bg"><a href="http://www.dijiuzhanzhang.com/" target="_blank">魏晨加盟碧海金沙音樂節 勁歌熱舞引爆夏日狂歡</a></span> </li> </ul> </div>