新聞焦點圖代碼制作帶縮略圖的焦點圖代碼



116 463 155



特效描述:新聞焦點圖 帶縮略圖焦點圖,

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/style.css">

2. 引入JS

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/ImageSlide.js"></script>

3. HTML代碼

<div id="focusImage" class="slide">
	<ul class="contents">
		<li class="current">
			<div class="image"><a href="#"><img src="images/1.jpg" width="400" height="282"></a></div>
			<div class="text">
				<span class="title"><a href="#">新華社英文推出習近平系列舊照</a></span>
				<p>12月23日,新華英文推出習近平系列新老照片,題目為《Profile photos: Xi Jinping: Man of the people, statesman of vision》。</p>
			</div>
		</li>
		<li>
			<div class="image"><a href="#"><img src="images/2.jpg" width="400" height="282"></a></div>
			<div class="text">
				<span class="title"><a href="#">新華社英文推出李克強系列舊照</a></span>
				<p>12月23日,新華英文推出李克強系列新老照片,題目為《Profile photos: Li Keqiang: A man who puts people first》。</p>
			</div>
		</li>
		<li>
			<div class="image"><a href="#"><img src="images/3.jpg" width="400" height="282"></a></div>
			<div class="text">
				<span class="title"><a href="#">中國老一輩領導的夫人們</a></span>
				<p>勞安與朱镕基同是湖南人,且都在湘西上過學。朱镕基與勞安的結識,得益于朱镕基中學時的一位同窗好友,勞安是朱镕基一位名為勞特夫同學的妹妹。</p>
			</div>
		</li>
		<li>
			<div class="image"><a href="#"><img src="images/4.jpg" width="400" height="282"></a></div>
			<div class="text">
				<span class="title"><a href="#">北京異地考生家長請愿被警方驅散 </a></span>
				<p>12月22日,北京,部分非京籍考生家長在奧運大廈附近請愿,呼吁教育公平,集會持續很短時間后被警方驅散。近日,15歲的江西女孩占海特在微博上爭取非滬...</p>
			</div>
		</li>
		<li>
			<div class="image"><a href="#"><img src="images/5.jpg" width="400" height="282"></a> </div>
			<div class="text">
				<span class="title"><a href="#">越南抗議者組成足球隊反華</a></span>
				<p>越南抗議者為避政府驅散,成立名為“NO U FC”足球隊反華,U暗指南海“九段線”,FC既代表“足球俱樂部”,也是“該死的中國”的簡稱。</p>
			</div>
		</li>
	</ul>
	<div class="triggers">
		<a href="javascript:;" class="cur current"><img src="images/1.jpg" width="58" height="38"></a>
		<a href="javascript:;"><img src="images/2.jpg" width="58" height="38"></a>
		<a href="javascript:;"><img src="images/3.jpg" width="58" height="38"></a>
		<a href="javascript:;"><img src="images/4.jpg" width="58" height="38"></a>
		<a href="javascript:;"><img src="images/5.jpg" width="58" height="38"></a>
	</div>
	<div class="icon-dot">
		<a href="javascript:;" class="cur current"></a>
		<a href="javascript:;"></a>
		<a href="javascript:;"></a>
		<a href="javascript:;"></a>
		<a href="javascript:;"></a>
	</div>
	<span class="link-watch pre down"></span>
	<span class="link-watch next down"></span>
</div>
<script type="text/javascript">
new ImageSlide({
	project:"#focusImage",
	content:".contents li",
	tigger:".triggers a",
	dot:".icon-dot a",
	watch:".link-watch",
	auto:!0,
	hide:!0
})
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 焦點圖 幻燈片 輪播圖 bar焦點圖 帶標題的焦點圖 帶縮略圖的幻燈片 帶簡介的焦點圖 圖片切換 圖片選項卡 圖標選項卡 自動滾動圖片輪播 選項卡自動切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表