jQuery電影網站和視頻網站首頁大屏焦點圖片切換滾動



105 418 140



特效描述:jQuery 首頁大屏焦點圖 圖片切換滾動,電影站jQuery帶縮略圖幻燈片

代碼結構

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jQuery.js"></script>
<script src="js/jquery.slides.js" type="text/javascript"></script>

3. HTML代碼

<div id="slider">
	<div class="slider_box" id="slider_name">
		<div class="silder_tip" id="movie_tip">電影</div>
		<ul class="silder_con">		
			<li class="silder_panel clearfix">
				<a href="#" class="f_l"><img src="images/2012101623050497.jpg" /></a>
				<div class="silder_intro f_r">
					<h3><strong><a href="#">太極之從零開始</a></strong><span>最新:TS版</span></h3>
					<ul>
						<li><label>類型:</label><span><a href="#">動作</a><a href="#">古裝</a><a href="#">預告片</a></span></li>
						<li><label>導演:</label><span><a href="#">馮德倫</a></span></li>
						<li><label>主演:</label><span><a href="#">梁家輝</a><a href="#">楊穎</a><a href="#">彭于晏</a><a href="#">馮紹峰</a></span></li>
					</ul>
					<p>[<strong>影片介紹</strong>]《太極之從零開始》是由華誼兄弟出品,王中磊擔任制片人、陳國富監制、馮德倫導演的電影《太極》三部曲中的第一部。該片已入圍第69屆威尼斯電影節非..</p>
					<a class="silder_play" target="_blank" href="http://www.dijiuzhanzhang.com/">馬上觀看</a>
				</div>
			</li>
			<li class="silder_panel clearfix">
				<a href="#" class="f_l"><img src="images/2012101623074142.jpg" /></a>
				<div class="silder_intro f_r">
					<h3><strong><a href="#">銅雀臺</a></strong> <span>最新:TC</span></h3>
					<ul>
						<li><label>類型:</label><span><a href="#">愛情</a><a href="#">古裝</a><a href="#">預告片</a></span></li>
						<li><label>導演:</label><span><a href="#">趙林山</a></span></li>
						<li><label>主演:</label><span><a href="#">周潤發</a><a href="#">劉亦菲</a><a href="#">玉木宏</a></span></li>
					</ul>
					<p>[<strong>影片介紹</strong>]庚子年,恰逢天象“四星合一”,預示改朝換代之征兆。曹操(周潤發飾)的部屬、尤其他的公子曹丕(邱心志飾),希望借此良機推獻帝禪位、曹操登..</p>
					<a class="silder_play" target="_blank" href="http://www.dijiuzhanzhang.com/">馬上觀看</a>
				</div>
			</li>
			<li class="silder_panel clearfix">
				<a href="#" class="f_l" title="蝙蝠俠前傳3黑暗騎士崛起"><img src="images/2012092600425434.jpg" title="蝙蝠俠前傳3黑暗騎士崛起" /></a>
				<div class="silder_intro f_r">
					<h3><strong><a href="#" title="蝙蝠俠前傳3黑暗騎士崛起">蝙蝠俠前傳3黑暗騎士崛起</a></strong><span>最新:BD國語全集</span></h3>
					<ul>
						<li><label>類型:</label><span><a href="#">動作</a><a href="#">驚悚</a><a href="#">魔幻</a></span></li>
						<li><label>導演:</label><span><a href="#">克里斯托弗·諾蘭</a></span></li>
						<li><label>主演:</label><span><a href="#">克里斯蒂安·貝爾</a><a href="#">湯姆·哈迪</a><a href="#">安妮·海瑟薇</a></span></li>
					</ul>
					<p>[<strong>影片介紹</strong>]本片是克里斯托弗·諾蘭執導的“蝙蝠俠”系列三部曲的最終章。前兩部分別是2005年的《蝙蝠俠:開戰時刻》和2008年的《蝙蝠俠:黑暗騎士》。此片為20..</p>
					<a class="silder_play" target="_blank" href="http://www.dijiuzhanzhang.com/">馬上觀看</a>
				</div>
			</li>
			<li class="silder_panel clearfix">
				<a href="#" class="f_l"><img src="images/2012092600451002.jpg" /></a>
				<div class="silder_intro f_r">
					<h3><strong><a href="#">生化危機5</a></strong> <span>最新:TC</span></h3>
					<ul>
						<li><label>類型:</label><span><a href="#">科幻</a><a href="#">驚悚</a><a href="#">懸疑</a></span></li>
						<li><label>導演:</label><span><a href="#">保羅·安德森</a></span></li>
						<li><label>主演:</label><span><a href="#">米拉·喬沃維奇</a><a href="#">西耶娜·蓋爾利</a><a href="#">李冰冰</a><a href="#">米歇爾·羅德里格茲</a></span></li>
					</ul>
					<p>[<strong>影片介紹</strong>]影片設定在1998年,影片不再是只把焦點集中在愛麗絲這個角色身上,吉爾將在由安布雷拉(Umbrella)制造的僵尸潮的爆發中扮演重要角色。里昂·肯尼迪..</p>
					<a class="silder_play" target="_blank" href="http://www.dijiuzhanzhang.com/">馬上觀看</a>
				</div>
			</li>
			<li class="silder_panel clearfix">
				<a href="#" class="f_l"><img src="images/2012092600432575.jpg" /></a>
				<div class="silder_intro f_r">
					<h3><strong><a href="#">普羅米修斯</a></strong> <span>最新:BD版</span></h3>
					<ul>
						<li><label>類型:</label><span><a href="#">科幻</a><a href="#">驚悚</a></span></li>
						<li><label>導演:</label><span><a href="#">雷德利·斯科特</a></span></li>
						<li><label>主演:</label><span><a href="#">勞米·拉佩斯</a><a href="#">邁克爾·法斯賓德</a></span></li>
					</ul>
					<p>[<strong>影片介紹</strong>]2058年,考古學家在非洲挖掘出的古跡發現,人類是由一個進化程度更高的外星生物種族創造的。于是人們派出飛船“普羅米修斯號”前去外星“上帝”的星..</p>
					<a class="silder_play" target="_blank" href="http://www.dijiuzhanzhang.com/">馬上觀看</a>
				</div>
			</li>
			<li class="silder_panel clearfix">
				<a href="#" class="f_l"><img src="images/2012092600431140.jpg" /></a>
				<div class="silder_intro f_r">
					<h3><strong><a href="#">敢死隊2</a></strong> <span>最新:BD英語上集</span></h3>
					<ul>
						<li><label>類型:</label><span><a href="#">動作</a><a href="/class/movie-cid-13-area-0-time-0-p-1.shtml" target="_blank">冒險</a></span></li>
						<li><label>導演:</label><span><a href="#">西蒙·韋斯特</a></span></li>
						<li><label>主演:</label><span><a href="#">西爾維斯特·史泰龍</a><a href="#">杰森·斯坦森</a><a href="#">布魯斯·威利斯</a><a href="#">米基·洛克</a><a href="#">李連杰</a></span></li>
					</ul>
					<p>[<strong>影片介紹</strong>]敢死隊2,由西蒙·韋斯特執導,主要講述的是圖爾“Tool”(米基·洛克飾演)在執行一項任務時被殘忍殺害,以史泰龍為首的“敢死隊”發誓為他報仇。與..</p>
					<a class="silder_play" target="_blank" href="http://www.dijiuzhanzhang.com/">馬上觀看</a>
				</div>
			</li>
			<li class="silder_panel clearfix">
				<a href="#" class="f_l"><img src="images/2012092600423387.jpg" /></a>
				<div class="silder_intro f_r">
					<h3><strong><a href="#">邊境風云</a></strong> <span>最新:DVD版</span></h3>
					<ul>
						<li><label>類型:</label><span><a href="#">劇情</a><a href="#">冒險</a></span></li>
						<li><label>導演:</label><span><a href="#">程耳</a></span></li>
						<li><label>主演:</label><span><a href="#">孫紅雷</a><a href="#">王珞丹</a><a href="#">張默</a><a href="/zhuyan/sid-24389.shtml">倪大紅</a><a href="/zhuyan/sid-25763.shtml">楊坤</a></span></li>
					</ul>
					<p>[<strong>影片介紹</strong>]中緬兩國邊境毒品交易肆虐,云南小鎮的緝毒警察(張默飾)無意中由殺手(楊坤飾)查到一條重大販毒罪案線索,而一切跡象皆指向黑幫老大(孫紅雷飾)..</p>
					<a class="silder_play" target="_blank" href="http://www.dijiuzhanzhang.com/">馬上觀看</a>
				</div>
			</li>
			<li class="silder_panel clearfix">
				<a href="#" class="f_l"><img src="images/2012092600435337.jpg" /></a>
				<div class="silder_intro f_r">
					<h3><strong><a href="#">聽風者</a></strong> <span>最新:BD下集</span></h3>
					<ul>
						<li><label>類型:</label><span><a href="#">劇情</a><a href="#">懸疑</a></span></li>
						<li><label>導演:</label><span><a href="#">麥兆輝</a><a href="#">莊文強</a></span></li>
						<li><label>主演:</label><span><a href="#">梁朝偉</a><a href="#">周迅</a><a href="#">范曉萱</a><a href="#">王學兵</a><a href="#">董勇</a></span></li>
					</ul>
					<p>[<strong>影片介紹</strong>]《聽風者》改編自麥家小說《暗算》,而鎖定男主角為梁朝偉。《暗算》原著講述《聽風》《看風》《捕風》三個故事。該片選取第一個故事,基本框架不變..</p>
					<a class="silder_play" target="_blank" href="http://www.dijiuzhanzhang.com/">馬上觀看</a>
				</div>
			</li>
		</ul>
		<ul class="silder_nav clearfix">            
			<li><a href="#"><img src="images/2012101623050497.jpg"/></a></li>    
			<li><a href="#"><img src="images/2012101623074142.jpg"/></a></li>    
			<li><a href="#"><img src="images/2012092600425434.jpg"/></a></li>    
			<li><a href="#"><img src="images/2012092600451002.jpg"/></a></li>    
			<li><a href="#"><img src="images/2012092600432575.jpg" /></a></li>    
			<li><a href="#"><img src="images/2012092600431140.jpg"/></a></li>    
			<li><a href="#"><img src="images/2012092600423387.jpg"/></a></li>    
			<li><a href="#"><img src="images/2012092600435337.jpg"/></a></li>    
		</ul>
	</div>
	<div class="silderBox"></div>
</div>



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


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

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子